css - 绝对定位的 div 在下面隐藏了我的其他 div

Question

我的网站容器有这个 CSS：

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

然后我在上面有一个容器来集中该信息。容器像我想要的.graybox那样扩展页面的宽度，但现在我的页脚 div 被隐藏了，根据萤火虫它实际上是在后面吗？并在页面上？

有解决办法吗？

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

score 2 · Accepted Answer

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

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

编辑

刚刚查看了您网站的代码，我不明白为什么您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 的背景。

score 0 · Accepted Answer

在 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.
}

2 回答 2