Absolute positioned div inside a relative positioned div

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 ?


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


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.

链接地址: http://www.djcxy.com/p/88468.html

上一篇: 在浮动css后div崩溃

下一篇: 绝对定位的div内的相对定位div