Le rembourrage de l'élément relativement positionné affecte-t-il (0,0) l'élément enfant positionné de façon absolue?

Question

Ceci est un problème CSS qui n'a pas de sens pour moi ..

En ce moment, j'ai quelque chose comme ceci:

.container { 
    height: 500px; 
    width: 500px; 
    position: relative; 
    padding: 10px; 
} 

.child { 
    top:0px; 
    left:0px; 
    position:absolute; 
    width: 100px; 
    height: 100px; 
} 

L'enfant ne tient pas compte droit maintenant un rembourrage de parent. Cela me semble contre-intuitif. Ai-je manqué une solution rapide (je ne peux pas ajouter de marge/marge à l'enfant)? Ai-je gâché le DOCTYPE?

Merci! Matt Mueller

Answer 1

Étant donné que vous avez spécifié une position absolue pour l'élément enfant, ce comportement est correct. L'enfant sera positionné absolument avec la valeur gauche et supérieure.

Dans le modèle de positionnement absolu, une boîte est explicitement décalée par rapport à son bloc contenant. Il est retiré du flux normal entièrement (il a pas d'impact sur les frères et sœurs plus tard). Une case en position absolue établit un nouveau bloc contenant pour les flux flux normaux et absolument (mais pas fixe) descendants positionnés. Cependant, le contenu d'un élément positionné absolument ne circule pas autour de tout autre boîte. Ils peuvent masquer le contenu d'une autre boîte (ou être eux-mêmes masqués), en fonction des niveaux de pile des boîtes superposées.

Visual Formatting model - Absolute positioning