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，它才能正常工作。

为什么我无法将叠加层的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属性的影响，将其定位更改为相对

混淆css z-index

2 个答案: