如何将绝对定位的div容纳在相对定位的div中？

Question

4

我该如何将一个绝对定位的 `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>

当检查元素时，将导致contentWrapper的高度为0，内容类的div不会显示。

是否有一种方法可以为相对位置元素内的绝对定位元素应用clearfix方法？

我在这里尝试的是避免Looooong text扩展包装器（包装器具有动态宽度，不能固定）。contentWrapper包含文本并将其包裹，同时填充父包装器的宽度，以使其不会被扩展。唯一的问题是contentWrapper的高度为0，因此文本不显示。

还有其他方法吗？

- OguzGelal

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- iConnor · Answer 1

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

- var-foo · Answer 2

如果相对定位容器中唯一的元素是绝对定位的，那么您必须在容器上指定一个高度。问题在于，position:absolute会将元素从内容流中移除，因此容器无法识别绝对定位元素的高度。