La valeur maximale de l'élément enfant a augmenté après l'ajout d'un nouvel enfant - html, css, positionnement

Voici comment j'ai conçu la mise en page pour mon en-tête

<div id="DivHeader">
<div id="DivTop">
</div>
<div id="DivBottom">
</div>
</div>

Initialement, j'avais défini la propriété supérieure pour la DivBottom comme 35px.A cette époque, je n'avais pas DivTop.
Alors maintenant, après l'avoir ajouté, le sommet de la DivBottom a été calculé à partir du nouvel enfant (DivTop) comme DivTop"s height + DivBottom"s top. En conséquence, la mise en page s’est effondrée comme ce. J'ai besoin de placer DivTop sans affecter le DivBottom"s Top, Des idées.?

[Remarque: je n'ai pas utilisé le positionnement absolu pour mes divs, car dans ce cas, la marge: 0 ne fonctionnera pas automatiquement.]

Réponses:

Vous utilisez positionnement relatif, pour lequel c'est le comportement attendu. Voir le W3 sur le positionnement relatif:

Une fois qu'une boîte a été disposée selon le flux normal ou flottée, elle peut être décalée par rapport à cette position. C'est ce qu'on appelle le positionnement relatif.

Donc, si vous insérez quelque chose au-dessus d'un élément relativement positionné, il se positionnera d'abord en fonction du "flux normal", puis sera repositionné en fonction de votre CSS.

Vous aurez besoin de changer le position à une autre valeur si vous souhaitez le comportement que vous avez spécifié.

Vous devez utiliser le positionnement absolu:

#first
{
position:absolute;
left:50%;
margin-left:-5px; /* half the width value */
width:10px;
height:10px;
background-color:yellow;
}

http://jsfiddle.net/3u3gz/1/