绝对定位Div隐藏了我的其他Divs下面。

Question

我的网站的容器有这个CSS。

.graybox {
padding: 0 30px 30px 30px;
background: #ededed;
position:absolute;
left:0;
right:0;
}

然后我在上面加了一个容器，让信息居中。.graybox container按照我的要求铺开了页面的宽度，但是现在我的页脚div被隐藏了，根据firebug它实际上是在后面吗？而在页面上呢？

有什么办法可以解决这个问题吗？

当我在这里的时候，谁能解释一下页面右侧的白色空间。一旦页面尺寸变小，它就会生效。

Answer 1

你可以使用CSS z-index 属性来确保你的页脚在内容的前面。但Z-index只有在元素被定位时才会生效。所以请确保你添加了 position:relative 到您的页脚

#footer{
    position:relative;
    z-index:999;
}

编辑

刚刚检查了你网站的代码，我不明白为什么你的 graybox 的位置是绝对的，这样只会让事情变得更复杂。你的菜单也是一样，为什么要把它绝对定位，为什么不直接在HTML中按正确的顺序一开始就添加呢？

EDIT

如果你想让你的内容居中，但背景的宽度为100%，那么你可以简单地添加一个容器div，就像这样。

HTML

<div class="container">
    <div>lorem ipsum....</div>
</div>

CSS

.container{
    background:red;
}

.container div{
    width:400px;
    margin:0 auto;
    background:yellow;
}

目前您不能这样做，因为您有一个容器，您将其设置为 980px除非你确定你不想让任何东西覆盖在它上面，比如在这种情况下，容器中一个div的背景。

Answer 2

在div样式中，只需分配一个大于任何其他z-index的值，如

.divClass{
    position: absolute;
    z-index: 1 //if other elements are still visible chose a higher value such as 20 or  even higher.
}