css - Divs are not showing up in the correct order -

i have 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;    } 

and html:

<div class="loginbox">         <div class="panel panel-primary">         <div class="panel-heading"><font size="4">please log in or sign use service</font></div>             <div id="login" class="panel-body">                  <!-- panel stuff --> 

and background:

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

however, shows this:

however, want black background go behind loginbox. z index higher, why not showing in front of it?

after adding position:relative loginbox, overlay looks this:

z-index applies relative or absolute positioned elements. add position: absolute; or position:relative; login box , work.