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指数较高，为什么它没有显示在它前面？

在相对于loginBox添加position：后，我的叠加层如下所示：

Answer 1

z-index仅适用于相对或绝对定位的元素。将position: absolute;或position:relative;添加到您的登录框中即可生效。