html - 如何在相对定位的 div 中包含绝对定位的 div？

Question

如何div在相对定位中包含绝对定位div？例如，这样的结构：

.wrapper {
  position: relative;
}

.contentWrapper {
  position: absolute;
  top: 0;
  left: 0;
}

<div class="wrapper clearfix">
  <div class="contentWrapper">
    <div class="content">Looong text here...</div>
  </div>
</div>

将导致contentWrapper0 的高度（当检查元素时）并且具有内容类的 div 将不会显示。

有没有办法为相对元素中的绝对定位元素应用 clearfix 方法？

我在这里要做的是避免Looooong text扩展包装器（包装器具有动态宽度，无法修复）。contentWrapper包含文本并包装它，它还填充父包装器的宽度，使其不会被扩展。唯一的问题是 contentWrapper 的高度为 0，并且没有显示文本。

还有其他方法可以做到这一点吗？

score 0 · Accepted Answer

0

不，这是不可能的，您只能使用 clearfix 来清除浮动元素。

于 2013-09-11T22:42:58.740 回答

score 0 · Accepted Answer

如果相对定位的容器内的唯一元素是绝对定位的，则必须在容器上指定高度。问题是position:absolue从内容流中删除元素，因此容器无法识别绝对定位元素的高度。

2 回答 2