css - 在彼此下方显示相对容器（高度可变）

Question

我有一些相对定位的容器（高度不同），我想将它们显示在彼此下方。发生的事情是它们彼此重叠显示（参见小提琴）。

我position:relative在容器上使用是因为我希望子元素position:absolute相对于它们的容器具有并显示。例如，我认为可能有一个固定高度的快速修复，但这不是很灵活，我的容器（或他们的孩子）的高度会有所不同。

期望的结果 - 小提琴

实际结果 - 小提琴

代码：

<style type="text/css">
.outside
{
    position:relative;
    border:1px solid red;
}

.inside
{
    position:absolute;
    top:0;
    left:0;
}
</style>

<div class="outside">
    <div class="inside"><p>absolute 1</p></div>
</div>
<div class="outside">
    <div class="inside"><p>absolute 2</p></div>
</div>
<div class="outside">
    <div class="inside"><p>absolute 3</p></div>
</div>

Answer 1

当你在相对元素中放置绝对的东西时，这个相对元素不会考虑绝对元素的宽度或高度，所以只需添加一个- DEMO -height:30px;

如果您不希望有一个固定的高度，那么至少使用一个min-height. -演示-

Answer 2

您遇到的问题是您的outside容器没有尺寸，因为insidediv 是绝对定位的。

既然你说这些是可变高度的容器，我知道没有办法解决这个问题。

“期望的结果”小提琴有什么问题？您似乎正在尝试重新创建框呈现方式的默认行为。