一个DIV的CSS绝对定位受着不相关的div保证金(CSS Absolute Positioning

鉴于我希望一个200像素的红色框位于页面之后的100个像素的白色空间，然后在底部有一个紫色框的顶部以下。 这是在Dreamwever所见即所得的视图显示了我，但我所得到的在FF IE人权委员会是在页面中间的红色方块。 有趣的是，如果我添加边框到包装的div我得到了我的期望。

那么，什么是发生的是，上边距：在＃内容股利300像素的下推#header div充满。 由于#header div充满是#wrapper指定div中绝对定位的我不明白为什么会这样。

<style>
#wrapper{
    width:960px;
    margin:0 auto;
    background-color:#fff;
    position:relative;
    border:0px solid green;
    }
#header{
    width:960px;
    height:200px;
    background-color:#f00;
    position:absolute;
    top:0px;
    left:0px
    }
#content{
    width:960px;
    background-color:#f2f;
    margin-top:300px;
    }
</style>


<div id="wrapper">
    <div id="header">header</div>
    <div id="content">content<br  /><br  /><br  /></div>
</div>

Answer 1:

是的，你是在正确的轨道上。 什么是真正发生的是被应用于300像素保证金#wrapper指定 （因此，倒推的#header与它一起），因为W3C的盒子模型行为崩溃边缘 。

在这种情况下，“一箱及其第一在流动儿童的上边距上边距”塌陷：#wrapper指定的0像素最高利润和＃内容的顶部300像素利润率被合并成一个单一顶边距对于#wrapper指定 （＃内容是第一同流子自的#header具有绝对位置）。

一个简单的方法来解决这个问题，除了边框或改变#header的位置，简直是保证金更改为填充：

#content{
  width:960px;
  background-color:#f2f;
  padding-top:300px;
}

见http://www.w3.org/TR/CSS2/box.html#collapsing-margins

文章来源: CSS Absolute Positioning of one div being affected by margin in unrelated div