绝对定位的 div 在下面隐藏了我的其他 div答案

【问题标题】：Absolute Positioned Div is hiding my other divs below绝对定位的 div 在下面隐藏了我的其他 div
【发布时间】：2020-05-02 01:40:48
【问题描述】：

我的网站容器有这个 CSS：

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

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

有解决办法吗？

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

【问题讨论】：

【解决方案1】：

您可以使用 CSS z-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。

【讨论】：

【解决方案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.
}

【讨论】：