显示相对容器（具有可变高度）彼此下方

Question

我有一些相对定位的容器（高度不同），我希望将它们展示在彼此之下。发生的事情是他们互相展示（见小提琴）。

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

Desired result - fiddle

Actual result - fiddle

代码：

<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

当您在相对元素中放置绝对时，此相对元素将不会考虑绝对元素的宽度或高度，因此只需添加{ {1}} - DEMO -

如果您不希望拥有固定的高度，请至少使用height:30px;。 - DEMO -

Answer 2

您遇到的问题是，outside容器没有维度，因为inside div 绝对定位。

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

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