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

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

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

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

Here is a jsfiddle什么我谈论的一个简单的例子。

如果您删除背景属性或相对定位属性，它的工作原理。我想知道有什么工作，但更重要的是，我很好奇为什么这种情况正在发生。

来源

2014-01-23 red888

您需要使用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

来源

2014-01-23 14:32:06

精氨酸那么明显。我其实尝试将容器的z-index设置为0，所以我在那里是_almost_。非常感谢兄弟。 – red888

没问题的队友！你很近，但幸运的是现在已经解决了。：] –

试举到覆盖DIV一个高的z-index因为如果两者都有position:relative z-index可能会修复你的问题。

来源

2014-01-23 14:32:11

这是关于元素#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

来源

2014-01-23 14:36:05 Pesulap

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

回答

相关问题