html - 添加新子元素后子元素的 top 值增加

Question

这就是我设计标题布局的方式

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

最初我将 DivBottom 的顶部属性设置为 35px。当时我没有 DivTop。
所以现在，在添加它之后， DivBottom 的顶部已根据新子 (DivTop) 计算为 DivTop 的高度 + DivBottom 的顶部。结果布局像this一样折叠起来.我需要在不影响 DivBottom 的顶部 的情况下放置 DivTop，有什么想法吗？

[注意:我没有为我的 div 使用绝对定位，因为那样的话 margin:0 auto 将不起作用。]

Answer 1

您正在使用相对定位，这是预期的行为。查看W3 on relative positioning :

Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning.

所以如果你在一个相对定位的元素之上插入一些东西，它会首先根据“正常流程”定位，然后根据你的 CSS 重新定位。

如果您想要指定的行为，您需要将 position 更改为另一个值。