问CSS绝对定位故障排除

EN

绝对定位内部相对定位

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

如果要设置div的绝对位置，请确保包含该div的div具有相对位置，这样它就不会跳出框框并扰乱元素，例如: html：

<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>

css：

.container{
width:75%;
height:500px;
border:1px black solid;
position: relative;
}
.box1{
    width:50px;
    height:50px;
    border:1px solid red;
    position:absolute;
    top:0;
    left:0;
}
.box2{
    width:50px;
    height:50px;
    border:1px solid green;
    position:absolute;
    bottom:0;
    right:0;
}

http://jsfiddle.net/ahmedskaya/DZ2DF/

请通过在css中定义绝对定位(横幅) div的父div的一些高度来检查。这可能是内容div往上推的原因。因为绝对定位div的父级不会自动或通过绝对定位内容绘制高度，并折叠到其最小高度。

因此，您可能需要在css中定义父div的特定高度，以使其覆盖绝对定位div的高度区域。

另外，因为你的内容div (可能)有正常的内容(不是绝对定位的)，所以它会像正常的div一样绘制高度。所以footer div不能向上推到它的高度之外。

这应该可以解决您的问题。