为什么内容重叠？

Question

我查看了Chrome开发人员工具，但不明白为什么会这样。 我希望看到一个在另一个下面的块。但我需要孩子有绝对的定位块才能动画。

当前结果

CSS

.container {
    position: relative;
}

.child {
    position: absolute;
}

.sibling {
    position: static;
}

HTML

<div class="container">
    <div class="child">
        <p class="red">Lorem ipsum ...</p>        
    </div>
</div>
<div class="sibling">
    <p class="blue">Lorem ipsum ...</p>       
</div>

JSFIDDLE

Answer 1

这是另一个'BFC'（块格式化上下文）问题。当您向元素添加position：absolute或fixed时，该元素将创建一个BFC。 BFC不与其他元素共享保证金。

您可以搜索有关BFC的内容或阅读w3和this

我的解决方案是将overflow:hidden添加到.sibling以使.sibling成为另一个BFC

jsfiddle

Answer 2

是的，因为当您使用position: absolute;将div.child元素从文档的常规流中取出时，您已将position: relative;设置为div.container但div.container而div.sibling 1}}没有任何高度（0px），这就是div.container与margin: 0px;重叠的原因。

如果您将p设置为div.sibling代码，则div.container与position: absolute;完全重叠 - DEMO

解决方案：首先，没有办法按照您的意愿使用CSS。您必须删除div.container或将高度设置为div.container。

<强> [EDITED]

Chrome开发人员工具的

{{1}}高度为0px。