具有绝对定位的孩子的相对定位的父母折叠了后面的元素

Question

我有以下HTML:

<div id="contents">
    <div id="inner">Inner Div</div>
</div> 

<div id="footer">Footer</div>?

应用以下CSS:

#contents {
    position: relative;
}

#inner {
    position: absolute;
    background-color: green;
    width: 100%;
}

#footer {
    background-color: red;
}?

问题在于#footer崩溃和崩溃#contents.你也可以在这里查看jsfiddle http://jsfiddle.net/MAhmadZ/YkJMH/1/

注意:这只是一个较大页面的摘要.我别无选择,只能使用position属性.我有多个div内#contents所有的绝对位置,只有1将在同一时间内显示.我无法确定身高

Answer 1

通过绝对定位将#contents元素#inner从流中取出后,您的元素为空,因此它的高度为零,因此#footer在其下方折叠.

如果给出#contents一个高度或一些垂直填充,它应该防止#footer在绝对定位的元素下面滑动.