html - 添加新子元素后子元素顶部值增加

Question

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

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

最初我将 top 属性设置DivBottom为 35px。当时我没有DivTop。
所以现在，在添加它之后，顶部DivBottom已经从新的 child(DivTop) 计算为DivTop's height+ DivBottom's top。结果布局像这样崩溃了。我需要在DivTop不影响的情况下放置DivBottom's Top，任何想法。？

[注意：我没有为我的 div 使用绝对定位，因为在这种情况下，margin:0 auto 将不起作用。]

Answer 1

您需要使用绝对定位：

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

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

Answer 2

您正在使用相对定位，这是预期的行为。请参阅W3 上的相对定位：

一旦一个盒子按照正常流程布局或浮动，它可能会相对于这个位置移动。这称为相对定位。

因此，如果您在相对定位的元素上方插入一些东西，它将首先根据“正常流程”定位，然后根据您的 CSS 重新定位。

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