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

Question

如果我在相对定位和绝对定位元素之后放置任何内容，它们会重叠。如果我指定高度，则不会发生这种情况，但我不想这样做，因为相对定位元素的内容是动态的。如何在不指定高度的情况下消除重叠？

简单示例：

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

- gadelat

---

我会使用“float”，但如果您必须使用“position”，那么您将需要JavaScript。如果您需要JavaScript解决方案，请回复评论。 - twinlakes

你能提供一个真实的例子吗？也许有另一种方法。为什么内部元素需要是绝对定位的？ - nirazul

你想让内部div绝对定位有什么原因，但其他元素要尊重它在文档流中的位置吗？ - thgaskell

这里有一个 JSFiddle 可以用来练习。 - Miklos Aubert

问题仍然存在。这意味着在不指定高度的情况下消除与绝对定位元素的重叠。不完全用不同的解决方案替换它。如果无法做到这一点，请说出来。如果没有人能证明相反，我将接受这个答案。 - gadelat

Answer 1

绝对定位会将元素从结构流中移出，因此它的存在被忽略。这就是它的目的所在。如果您需要将元素向左或向右定位，请使用float。

当浮动元素时，请确保清除 div 底部，以保留布局。

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

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

- Kevin Lynch

---

我认为绝对定位应该只是将元素从其相对定位的父元素中移出，但这个概念是有缺陷的。 - gadelat

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>

- Rishi Kulshreshtha

---

正如我所说，我不想指定高度。 - gadelat

对于那些不介意设置高度的人，这对我很有帮助 +1 - Matt Cremeens

Answer 3

父级：

position: relative;

子元素：

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

- leonheess