css - Div 未按正确顺序显示

Question

我有这个 CSS:

.overlay{
    opacity:0.5;
    background-color:black;
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:2;
}

.loginBox{
    width: 65%;

    margin-left: auto;
    margin-right: auto;

    height: 300px;
    z-index: 1001 !important;
    margin: auto;

    word-wrap:break-word;   
}

还有这个 HTML:

<div class="loginBox">
        <div class="panel panel-primary">
        <div class="panel-heading"><font size="4">Please log in or sign up to use this service</font></div>
            <div id="login" class="panel-body">
                 <!-- Panel stuff -->

这是背景:

<div id="loginFormBackground" class="overlay"></div>

但是，它是这样显示的:

但是，我希望黑色背景位于 loginBox 后面。 z索引更高，为什么前面没有显示？

添加 position:relative 到 loginBox 后，我的覆盖图如下所示:

Answer 1

z-index 仅适用于相对或绝对定位的元素。将 position: absolute; 或 position:relative; 添加到您的登录框，它将起作用。