D'abord, voyons por qué c'est en train de se produire.
La raison en est que, étonnamment, lorsqu'une boîte a position: absolute sa boîte de contenu est la boîte de remplissage du parent (c'est-à-dire la boîte autour de son remplissage). C'est surprenant, car habituellement (c'est-à-dire lors de l'utilisation du positionnement statique ou relatif), la boîte de contenu est la boîte de remplissage du parent. contenu boîte.
Voici le partie pertinente de la spécification CSS :
Dans le cas où l'ancêtre est un élément en ligne, le bloc contenant est la boîte de délimitation autour des boîtes de remplissage de la première et de la dernière boîte en ligne générées pour cet élément..... Sinon, le bloc contenant est formé par le bord de remplissage de l'ancêtre.
L'approche la plus simple - comme suggéré dans la réponse de Winter - est d'utiliser padding: inherit sur la position absolue div . Cela ne fonctionne, cependant, que si vous ne voulez pas que la position absolue div d'avoir un rembourrage supplémentaire qui lui est propre. Je pense que les solutions les plus polyvalentes (dans la mesure où les deux éléments peuvent avoir leur propre rembourrage indépendant) sont les suivantes :
-
Ajoutez une position relative supplémentaire div (sans remplissage) autour de l'objet positionné de façon absolue div . Ce nouveau div respectera le rembourrage de son parent, et le positionnement absolu de la fonction div le remplit alors.
L'inconvénient, bien sûr, c'est que vous manipulez le HTML simplement à des fins de présentation.
-
Répétez le rembourrage (ou ajoutez-le) sur l'élément positionné de façon absolue.
L'inconvénient est que vous devez répéter les valeurs dans votre CSS, ce qui est fragile si vous écrivez le CSS directement. Cependant, si vous utilisez un outil de prétraitement tel que SASS o LESS vous pouvez éviter ce problème en utilisant une variable. C'est la méthode que j'utilise personnellement.
