混淆css z-index

2024年2月4日 179次阅读

我有两层,一层是黑色叠加层：

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

最佳答案 z-index不适用于#wrap,因为它具有流定位功能.一个盒子必须至少有位置：相对;在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; }
点赞