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

Posted 2023-03-06

【中文标题】一个 div 的 CSS 绝对定位受无关 div 中的边距影响

【英文标题】：CSS Absolute Positioning of one div being affected by margin in unrelated div

【发布时间】：2012-05-07 18:48:38

【问题描述】：

鉴于以下情况，我希望页面顶部有一个 200 像素的红色框，然后是 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>

【参考方案1】：

是的，你在正确的轨道上。真正发生的是 300px 边距被应用到 #wrapper （因此，随着它向下推 #header） 因为 @ 的 W3C 盒子模型行为987654321@.

在这种情况下，“盒子的上边距和它的第一个流入孩子的上边距”被折叠：#wrapper 的 0px 上边距和 #content 的 300px 上边距合并为 #wrapper 的单个上边距（#content 是第一个流入的子项，因为#header 具有绝对位置）。 em>

解决此问题的一种简单方法，除了边框或更改#header 的位置外，只需将边距更改为填充：

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

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