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

Question

看看，http://thomaspalumbo.com

我的网站容器有这个 CSS：

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

然后我在上面有一个容器来集中该信息。容器.graybox按照我想要的方式扩展页面的宽度，但现在我的页脚 div 被隐藏了，根据 firebug 的说法，它实际上是在后面吗？在页面上？

有解决办法吗？

当我在这里时，任何人都可以解释页面右侧的空白区域。一旦页面缩小，它就会生效。

Answer 1

您可以使用 CSSz-index属性来确保页脚位于内容前面。Z-index 仅在元素定位时才起作用。所以请确保添加position:relative到页脚

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

了解更多：http ://www.w3schools.com/cssref/pr_pos_z-index.asp

编辑

刚刚检查了您网站的代码，我不明白为什么您的graybox定位是绝对的，这只会使事情变得更加复杂。您的菜单也是如此，为什么将其绝对定位，为什么不首先在 HTML 中以正确的顺序添加它呢？

编辑

如果你想将内容居中，但背景宽度为 100%，那么你可以简单地添加一个容器 div，如下所示：

超文本标记语言

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

CSS

.container{
    background:red;
}

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

请参阅此处的 JSFiddle：http://jsfiddle.net/HxBnF/

目前你不能这样做，因为你有一个设置为 的容器980px，永远不要这样做，除非你确定你不希望任何东西覆盖它，就像本例中该容器中 div 的背景。