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

Question

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

简单的例子:

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

Answer 1

由于您已经应用了position:relative第一个元素，因此您必须指定height或提供padding-bottom它。

例如，在您提供的代码中我已经应用height了20px它。

注意：对于这种场景，使用height比使用更好padding-bottom

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