position relative-absolute child margin 错误？

Question

任何人都可以解释我如何防止兄弟 div 的边缘影响另一个？浏览器为什么这样布局对我来说在逻辑上没有意义。

我试图让黄色框相对于父框 top/left，但是带有 margin-top 的蓝色框影响黄色框。

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>

Answer 1

这被称为 collapsing margins。

8.3.1 Collapsing margins

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

一个解决方案是将父元素的 overflow 属性设置为默认值 visible.

以外的值

auto 或 hidden 等值会产生预期结果。

（请参阅上面的 link 以了解解决此问题的替代方法。）

Updated Example

section {
    position: relative;
    overflow: auto;
}

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

9.4.1 Block formatting contexts

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

position relative-absolute child margin 错误？

position relative-absolute child margin bug?

html

javascript

css