Pourquoi un élément décalé avec position: relatif contribue-t-il toujours aux dimensions parentes comme s'il n'avait pas été déplacé?

Pourquoi un élément HTML (comme un div) qui a été avec stylePourquoi un élément décalé avec position: relatif contribue-t-il toujours aux dimensions parentes comme s'il n'avait pas été déplacé?

position: relative; 
top: -50px;

forcer encore l'élément parent d'avoir la même taille que si l'élément positionné relativement n'a pas été déplacé?

Permettez-moi de vous donner un exemple (exemple en direct trouvé à http://jsbin.com/ohebi4/2/edit)

<html> 
<head> 
    <style> 
     article, aside, figure, footer, header, hgroup, 
     menu, nav, section { display: block; } 

     .parent{ position: relative; background-color: #000000; float: left; border: 1px solid red; } 
     .child1{ float: left; background-color: #888888;} 
     .child2{ float: left; background-color: #CCCCCC; } 

     .subchild{ position: relative; top: -45px; height: 30px; border: 1px solid green;} 
     .subchild2{ height: 30px; border: 1px solid green;} 
    </style> 
</head> 
<body> 

    <div style='clear: both; height: 50px;'></div> 
    <div class='parent'> 
    <div class='child1'>regular content</div> 
    <div class='child2'>content of child 2</div> 
    </div> 
    <div>Sample A</div> 

    <div style='clear: both; height: 50px;'></div> 
    <div class='parent'> 
    <div class='child1'><div class='subchild2'>subchild</div></div> 
    <div class='child2'>content of child 2</div> 
    </div> 
    <div>Sample B</div> 

    <div style='clear: both; height: 50px;'></div> 
    <div class='parent'> 
    <div class='child1'><div class='subchild'>subchild</div></div> 
    <div class='child2'>content of child 2</div> 
    </div> 
    <div>Sample C</div> 

    <div style='clear: both; height: 50px;'></div> 
    <div class='parent'> 
    <div class='child1'><span>child 1</span><div class='subchild'>subchild</div></div> 
    <div class='child2'>content of child 2</div> 
    </div> 
    <div>Sample D</div> 
</body> 
</html>

Le balisage ci-dessus crée une page qui ressemble à ceci:

alt text

échantillon A: Juste quelques divs l'intérieur d'un div parent, d'une teneur normale et de débit

Echantillon B: Ajout d'une subchild div, avec une hauteur de 30px . Comme prévu, il change la hauteur du parent, révélant ainsi le fond noir sous « contenu de l'enfant b »

Exemple C: Le subchild est repositionne avec position: relative. Notez que même si cet élément est décalé par-dessus tout, il contribue toujours à la hauteur du parent, gardant ainsi le fond noir révélé

Échantillon D: Problème dans l'échantillon C excéré par l'ajout d'une travée avant div diviseur.

Le comportement en A et B, je comprends. Ce que je ne comprends pas, c'est le comportement en C et D. Si l'élément qui rend le parent plus grand est repositionné de telle sorte qu'il ne soit plus dans cet espace ... pourquoi cela rend-il toujours le parent plus grand?

Je pense (à tort, évidemment), cet exemple C (et D) regarderait identique à A, avec l'ajout de la case « subchild » verte au-dessus.

Quelqu'un peut-il m'expliquer pourquoi c'est, et comment pas avoir un élément relativement placé affecte les dimensions du parent comme ça?

Source

2010-09-01 Matt

Vous devez définir:

position:absolute;

d'avoir la .subchild ne pas être mis dans le flux normal. Comme vous avez déjà configuré .parent sur position:relative;, vous n'avez rien d'autre à faire.

Selon this, position:relative; est toujours calculée en débit normal. position:absolute; le rendra NON calculé en flux normal et utilisera la partie supérieure gauche de la première étiquette parent avec position:relative; comme origine. (Si aucun parent n'est relative, il assume la fenêtre d'affichage et agit comme s'il s'agissait de fixed.) position:fixed; utilise toujours la fenêtre en haut à gauche comme origine.

Source

2010-09-01 20:48:21

Merci. Et merci pour la référence w3. – Matt

De rien! Content que je puisse être utile. =) –

Pourquoi un élément décalé avec position: relatif contribue-t-il toujours aux dimensions parentes comme s'il n'avait pas été déplacé?

Répondre

Questions connexes