Question

任何人都可以解释我如何防止兄弟div的边缘影响另一个吗？从逻辑上讲，这对浏览器为什么这样做是不合理的。

我试图让黄色方框让它相对于父母的上/下，但是带有边距顶部的蓝色方框正在影响黄色方框。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

enter image description here

Answer 1

这称为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

浮动，绝对定位的元素，阻止不是块框的容器（例如内联块，表格单元格和表格标题），以及除“可见”以外的“溢出”的块框（除非该值已传播到视口）为其内容建立新的块格式化上下文。

在块格式化上下文中，框从一个包含块的顶部开始一个接一个地垂直排列。两个兄弟框之间的垂直距离由“边距”属性决定。块格式化上下文中相邻块级框之间的垂直边距折叠。

位置相对绝对子边缘错误？

1 个答案: