绝对定位的div内的相对定位div [英] Absolute positioned div inside a relative positioned div

问题描述

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

HTML

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

CSS

  .wrapper {
 position：relative; 
} 
 .contentWrapper {
 position：absolute; 
 top：0; 
剩下：0; 
} 
  

会导致contentWrapper的高度为0（当检查元素时）并且内容类的div不会显示。

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

谢谢

编辑：

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

有什么其他方法可以做到这一点？

解决方案

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

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

HTML

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

CSS

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

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

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

Thanks

Edit:

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.

Any other way to do this ?

解决方案

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屋！