CSS一个div的绝对定位受到无关div中的页边距的影响

鉴于以下情况，我期望在页面顶部有一个200像素的红色框，接着是100像素的空白框，然后是底部的紫色框。这就是Dreamwever中所见即所得的视图向我展示的内容，但是我在FF IE Chr中获得的是页面中间的红色框。有趣的是，如果我添加一个边界到包装div我得到我的期望。CSS一个div的绝对定位受到无关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>

来源

2012-04-27 Greg

是的，你是在正确的轨道上。真正发生的事情是300px页边距被应用到＃wrapper（并且因此，将它连同它一起向下推）由于W3C box-model行为collapsing margins。

在这种情况下，“一个盒子，它首先在流动儿童的上边距上边距”塌陷：#wrapper指定的0像素顶边距和＃内容的300像素顶边距被合并为一个单一的顶部边缘＃包装（＃内容是第一个流入的孩子，因为＃头部有一个绝对位置）。

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

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

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

来源

2012-04-27 01:48:16 rgthree

CSS一个div的绝对定位受到无关div中的页边距的影响

回答

相关问题