Question

我试图#menuContainer＆＃34;以上＆＃34; #mainOverlay使用z-index属性，但它不起作用。我的两个ID的代码：

MenuContainer中

#menuContainer{
    width:650px;
    height:50px;
    position:relative;

    z-index:2;

    margin-top:0;
    margin-right:auto;
    margin-bottom:0;
    margin-left:auto;

    background-color:rgba(100, 100, 100, 0.46);
}

mainOverlay

#mainOverlay{
    position: absolute;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;

    z-index:1;

    background-color: rgba(0,0,0,0.3);
}

或者，您可以查看此JSfiddle。

阅读类似的问题没有任何成果，这就是为什么我决定提出一个单独的问题，以防它在我所在的同一条船上为其他人工作。所有人都非常感谢。

Answer 1

您不在同一范围内，因此z-index无效。您需要在同一级别添加z-index，即在您的案例中添加到父元素#mainOverlayWrap。请记住，您还需要为z-index设置position: relative|absolute|fixed;才能生效。

Z-index工作不正常

1 个答案: