如何将元素定位在相对定位元素下方而不重叠？

Question

如果我在元素之后添加了具有相对+绝对定位元素的任何内容，则它会重叠。如果我指定高度，它不会这样做，但我不想这样做，因为相对定位元素的内容是动态的。如何在不指定高度的情况下摆脱重叠？

简单示例：

<div style="position:relative">
    <div style="position:absolute;">
        blabla
    </div>
</div>
I WANT THIS BELOW

Answer 1

absolute定位将元素从结构流中取出。由于这个原因，它的存在被忽略了，它的目的是什么。如果您需要向左或向右定位元素，请使用float

浮动元素确保清除div的底部，然后保留布局

<div style="clear:both;"></div>

DEMO http://jsfiddle.net/kevinPHPkevin/uHuSF/

否则，需要采用不同的方法来实现目标。

Answer 2

由于您已将position:relative应用于您的第一个元素，因此您需要指定height或向其提供padding-bottom。

例如，在您提供的代码中，我已将height的{​​{1}}应用于其中。

注意：使用20px比使用height更适合此类情景

padding-bottom

Answer 3

家长：

position: relative;

孩子：

position: absolute;
z-index: 2;
top: 100%;