css - 混淆 css z-index

Question

我有两层，一层是黑色覆盖层:

#overlay {
    background: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 0;
    display: none;
} 

另一个是我的文本容器:

#wrap {
    z-index: 999
    width:600px;
    height:600px;
    border:5px solid black;
    display:none;
    color:red;
}

我想让叠加层和容器同时显示:

$(document).click(function () {
    $('#overlay').add('#wrap').fadeIn();
})​​

但是文本容器总是在覆盖层下面，虽然我已经将覆盖层 z-index 设置为 0 并设置了容器 z-index 到 999。

演示是 here

最后我发现我必须将叠加层 z-index 设置为 -1，它会起作用。

为什么我不能将overlay的z-index设置得更高？因为它的位置是固定的？

Answer 1

z-index 不适用于#wrap 因为它有流定位。在 z-index 生效之前，盒子必须至少有 position: relative;。

此外，您的 z-index 值缺少分号。将其设为 z-index: 999; 即可。我的代码如下:

#wrap {
    z-index: 999;
    width:600px;
    height:600px;
    border:5px solid black;
    background: #FFF;
    display:none;
    color:red;
    position: relative; }