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。

演示在这里

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

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

Answer 1

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

此外，您的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; }

Answer 2

具有静态定位（这是默认值）的元素不受 z-index 属性的影响，将其定位更改为相对