如何在相对定位div中包含绝对定位div？ [英] How can I contain an absolute positioned div in a relative positioned div?

问题描述

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

How can I contain an absolute positioned div inside a relative positioned div? For example, a structure like this:

.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。

Will result as the height of the contentWrapper to be 0 (when element inspected) and the div with the content class will not show.

是否有办法对相对位置的绝对位置的元素应用clearfix方法？

Is there a way to apply clearfix method for absolute positioned elements inside relative ones?

我在这里要做的是避免展开包装程序后获得的文本（包装机具有动态宽度，无法固定）。 contentWrapper 包含并包装文本，它也填充了父包装的宽度，因此不会扩展。唯一的问题是contentWrapper的高度为0，并且文本不显示。

What I am trying to do here is to avoid the Looooong text from expanding the wrapper (wrapper has a dynamic width, cannot be fixed). contentWrapper contains the text and wraps it, also it fills the width of the parent wrapper so that it does not get expanded. The only problem is the height of the contentWrapper is 0, and the text is not showing.

还有其他方法吗？

推荐答案

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

If the only element inside your relatively positioned container is positioned absolute, you will have to specify a height on the container. The problem is that position:absolue removes the element from the content flow, so the container doesn't recognize the absolutely positioned element's height.

这篇关于如何在相对定位div中包含绝对定位div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！