如何用背景颜色覆盖相对定位的 div答案

【问题标题】：How to overlay a relative positioned div with a background color如何用背景颜色覆盖相对定位的 div
【发布时间】：2014-02-14 04:00:06
【问题描述】：

在处理一个项目时，我注意到一些让我感到困惑的行为。我正在添加一个弹出窗口，使用 jQuery fadeIn() 将背景变灰，以覆盖具有灰色透明背景颜色的 div（很确定您知道我在描述什么）。我注意到 div 覆盖了整个页面，除了一个相对定位且具有背景颜色的 div。就像这个 div 位于我调用 fadeIn() 的 div 之上。

这是一个不会被覆盖的元素的简单示例：

#container {
    position:relative;
    background: white;
    border: .1em solid black
}

Here is a jsfiddle 用一个简单的例子来说明我在说什么。

如果您删除背景属性或相对定位属性，它会起作用。我想知道有什么解决方法，但更重要的是我很好奇为什么会发生这种情况。

【问题讨论】：

标签： jquery css dom layout

【解决方案1】：

您需要使用z-index 让叠加层覆盖任何已定位的元素。

修改后的css：

#block {
    background: #000;
    opacity:0.6;
    position: fixed;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    display:none;
    z-index: 100;
}

最后，这是一个小提琴：Demo

这里有一些关于z-index的信息

【讨论】：

Arg 太明显了。我实际上尝试将容器的 z-index 设置为 0，所以我几乎在那里。非常感谢老兄。
没问题，伙计！你很接近，但幸运的是它现在已经解决了。 :]

【解决方案2】：

尝试为覆盖 DIV 提供高 z-index，因为如果两者都有 position:relative z-index 可能会修复您的问题。

【讨论】：

【解决方案3】：

这是关于元素#container 是#block，所以它出现在它上面。您只需设置 CSS z-index 即可。

#block {
   background: #000;
   opacity:0.6;
   position: fixed;
   width: 100%;
   height: 100%;
   top:0;
   left:0;
   display:none;
   z-index: 10;
}

demo

【讨论】：