javascript - 位置相对绝对子裕度错误？

谁能解释我如何防止兄弟div的边距影响另一个？对于我来说，从逻辑上讲，为什么浏览器以这种方式进行布局并不合理。

我正在尝试让黄色框相对于父级位于顶部/左侧，但是顶部具有边距的蓝色框正在影响黄色框。

http://jsfiddle.net/oufdfoLy/

section{
    position: relative;
}

div.options{
    position: absolute;
    left: 10px;
    top: 10px;
    display: inline-block;
    background: #ff0;
    padding: 50px;
}

div.content{
    height: 100px;
    width: 100%;
    background: #09c;
    margin-top: 50px;
}

<article>
    <section>
        <div class='options'>

        </div>
        <div class='content'>
            <h1>hello world</h1>
        </div>
    </section>
</article>

最佳答案

这称为collapsing margins。


  8.3.1 Collapsing margins
  
  在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以合并形成一个边距。据说以这种方式组合的边距已塌陷，所得的合并边距称为塌陷边距。


一种解决方案是将父元素的overflow属性设置为默认值visible以外的其他值。

诸如auto或hidden的值将产生预期的结果。

（有关替代方法，请参见上面的链接。）

Updated Example

section {
    position: relative;
    overflow: auto;
}

更改overflow属性的值将建立新的块格式化上下文。


  9.4.1 Block formatting contexts
  
  浮点数，绝对定位的元素，不是块框的块容器（例如内联块，表单元格和表标题），以及具有“可见”以外的“溢出”的块框（除非传播了该值）到视口）为其内容建立新的块格式上下文。
  
  在块格式设置上下文中，从包含块的顶部开始，将框一个接一个地垂直放置。两个兄弟箱之间的垂直距离由'margin'属性确定。块格式设置上下文中相邻块级框之间的垂直边距折叠。