首页 > 父元素使用相对定位,子元素使用绝对定位,父元素怎么被撑开?

父元素使用相对定位,子元素使用绝对定位,父元素怎么被撑开?

如题父元素使用相对定位relative,子元素使用绝对定位absolute,这个时候子元素脱离了文档流,父元素的高度是0,我的需求是父元素怎么被撑开?父元素的高度根据子元素的高度自适应。最好使用css方法。


你这样的要求用css貌似是无法达到的,一般用到position:absolute的情况都是不需要管父元素大小的吧。。实在需要还是用float去吧


用js实现吧


旧回答有误,请忽略

更新
事实上旧回答给出的方法只能适用于子元素使用 float 的时候,没看清问题就随意作答,很抱歉。

因为 BFC 的高度计算包含浮动元素,同时清除浮动元素也会让父元素撑开,所以可以实现父元素被子元素撑开的需求。

但是 position:absolute 或者 position:fixed 就不一样,它是脱离文档流的,而且不会计算被父元素计算在内,同时也没有办法像浮动一样被清除。所以你的需求应该是无法满足的。

旧回答:
只要在父元素创建一个 BFC 就可以,或者清除浮动。
比如:

.parent{
    overflow:hidden;
}

或者

.parent{
    display:inline-block;
}

清除浮动

.child:after{
    content:'';
    clear:both;
    overflow:hidden;
    height:0px;
    *zoom:1;
}

你可以搜索一下怎么产生 BFC,和如何清除浮动。可以找出更多的方法


你用absolute就已经脱离文档流,又要文档把它算进里面去,这要求有点精分。你可以用relative定位,不是非得用absolute的。

再说,如果你父元素里没有其它元素,那用absolute的意义是什么。


精分+1,用浮动吧

【热门文章】
【热门文章】