html - 为什么内容重叠？

Question

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

当前结果

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

是的，因为当您使用 position: absolute; 时，它会将您的 div.child 元素从文档的常规流中移除，并且您已经设置了 position: relative; 到您的 div.container 但您的 div.container 没有任何高度 (0px)，这就是为什么 div.sibling 与 div.container 重叠。

如果将 margin: 0px; 设置为 p 标签，则 div.sibling 会完全覆盖 div.container - DEMO

解决方案: 首先，没有办法用CSS来实现。您必须删除 position: absolute; 或将高度设置为您的 div.container。

[编辑]

div.container 在 chrome 开发者工具上高度为 0px。