绝对定位的div遮挡了下方的其他div。

Question

请看：http://thomaspalumbo.com 以下是我的网站容器的CSS代码：

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

然后我有一个容器来居中那些信息。.graybox的容器像我想要的一样展开了页面的宽度，但现在我的页脚div被隐藏了，根据firebug的显示，实际上是在后面和页面上方？

这个问题有解决方法吗？

顺便问一下，有人能解释一下页面右侧的空白是什么吗？一旦页面缩小，它就会生效。

- thomasp423

---

不是针对你的问题，但是你是否知道在你的 HTML 代码中有重复使用 Id ？看一下几个 div，例如 <div id="siteholder">。修复它，然后定位你的页脚，如果仍然需要的话... - Fico

是的，我正在重新审查几年前写的糟糕代码的过程中。 - thomasp423

@Fico，你建议我把它们都改成类吗？ - thomasp423

当然，这是一个不错的选择。那么...请阐述您的问题。 - Fico

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

- user2019515

---

好的，那把它带到了前面。现在它似乎在很高的位置。 - thomasp423

我希望我的内容保持居中，但我也希望那个灰色框和我的导航栏跨越整个页面的宽度。你知道其他方法吗？ - thomasp423

在答案中添加了更多信息，说明您可以如何实现这一点。 - user2019515

太简单了！谢谢，我做了这些更改，所有的问题都消失了。再次感谢您抽出时间来帮助我！ - thomasp423

我注意到的一个小问题是，当从移动设备或iPad查看我的页面时，右侧会出现白色空间。似乎它在body之外。 - thomasp423

对于空白处，您需要在那些背景中添加 min-width: /*内容宽度*/。 - user2019515

Answer 2

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

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

- Chukwuemeka Maduekwe