关于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设置得更高？因为它的位置是固定的吗？

- hh54188

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; }

- Dai

Answer 2

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

- Musa