Question

为我的网站划分：头横幅（横幅div内：另一个div调用内部横幅）主要内容第二内容 FooterWrap

我正在尝试开发的网站上有几个div标签，而我正在使用绝对位置的2个div标签（横幅为1，页脚为第2个），但是当我使用绝对时为横幅定位它将我的主要内容div向上推，使其看不见，但我的页脚没有那个问题。你能帮助我吗？

Answer 1

相对定位内的绝对定位

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

Answer 2

如果你想设置一个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/

Answer 3

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

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

此外，由于您的内容div（可能）具有正常内容（绝对定位），因此它将像普通div一样绘制高度。因此，页脚div无法超越其高度。

这可以解决您的问题。

CSS绝对定位故障排除

3 个答案: