CSS绝对定位一个div受不相关div中的保证金影响

Question

鉴于以下情况,我希望页面顶部有一个200px的红色框,然后是100像素的白色空格,然后是底部的紫色框.这就是Dreamwever中的WYSIWYG视图向我展示的内容,但我在FF IE Chr中获得的是页面中间的红色框.有趣的是,如果我在包装div中添加边框,我会得到我所期望的.

所以发生的事情是#content div的margin-top:300px正在推动#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

是的,你走在正确的轨道上.真正发生的是300px边距被应用于#wrapper (因此,随着它一起按下#header),因为折叠边距的W3C盒模型行为.

在这种情况下,"第一个流动孩子的盒子顶部边缘和上边缘"被折叠:#wrapper的0px上边距和#content的300px上边距合并为一个上边距对于#wrapper (#content是第一个流入的子节点,因为#header具有绝对位置).

除了边框或更改#header位置之外,解决此问题的一种简单方法是将边距更改为填充:

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

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