Question

在处理项目时，我注意到一些令我困惑的行为。我正在添加一个弹出窗口，使用jQuery fadeIn（）来渲染背景，以使用灰色透明背景颜色覆盖div（非常确定你知道我在描述什么）。我注意到div覆盖了整个页面，除了具有相对定位AND的div具有背景颜色。就像这个div在div上面一样，我称之为fadeIn（）。

这是一个不会重叠的元素的简单示例：

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

Here is a jsfiddle以我所说的为例。

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

Answer 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

的一些信息

Answer 2

尝试给叠加DIV一个高z索引，因为如果两者都有position:relative z-index可能会修复你的ptoblem。

Answer 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

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

3 个答案: