如何在相对定位的 div 中包含绝对定位的 div？答案

【问题标题】：How can I contain an absolute positioned div in a relative positioned div?如何在相对定位的 div 中包含绝对定位的 div？
【发布时间】：2013-09-16 03:27:31
【问题描述】：

如何在相对定位的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，文字不显示。

还有其他方法吗？

【问题讨论】：

标签： html css css-position

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：

当我指定高度时，它可以工作。但是高度是动态的，所以我无法修复它。我真的不想为此使用 jQuery。