css - Absolute Positioned 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

您可以使用 CSS z-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，如下所示:

HTML

<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 的背景。