Html 为什么内容重叠？

我浏览了chrome开发者工具，但不明白为什么会发生这种情况。 我希望能看到一个接一个的街区。但我需要孩子有绝对的定位块是动画

当前结果

CSS HTML

Lorem ipsum…
Lorem ipsum…

---

这是另一个“BFC”（块格式上下文）问题。将position:absolute或fixed添加到元素时，元素将创建BFC。BFC不与其他要素分享利润

您可以搜索有关BFC的信息或阅读

我的解决方案是将

溢出：hidden

添加到

.sibling

以将

.sibling

添加到另一个BFC中

---

是，因为当您使用

位置：绝对

将您的

div.child

元素从文档的常规流中移除，并且您已经设置了

位置：relative

到您的

div.container

但是您的

div.container

没有任何高度（0px），这就是为什么

div.sibling

与

div.container

重叠的原因

如果设置

margin:0px

到

p

标记，然后

div.sibling

完全重叠

div.container

-

解决方案：首先，使用CSS无法实现您想要的效果。您必须删除

位置：绝对

或将高度设置为

div.container

[编辑]

div.container

在chrome开发者工具上高度为0px

---

您希望发生什么？在不知道自己要做什么的情况下，很难提出解决方案。还请注意，在上面的代码中，同级已放置在容器外部。。。。

.container {
    position: relative;
}

.child {
    position: absolute;
}

.sibling {
    position: static;
}

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