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

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>

演示http://jsfiddle.net/kevinPHPkevin/uHuSF/

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

Answer 2

由于您已经应用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>

Answer 3

家长：

position: relative;

孩子：

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