z-index property does not work - html

Question

I want to set that in put textbox's location on initial condition header div. But that textbox is getting hidden under initial condition div.
Are there any alternative to z-index. I have attached my css also.
HTML:
<div id="initialCondHdr" class="initialCondHdr">Demo Experiment</div>
<div id="archiveTable_filter" class="dataTables_filter">
<label>
<input type="text" placeholder="Search" style="width:220px;height:30px;" />
</label>
</div>
CSS:
#initialCondHdr {
color:#043751;
font-family:calibri;
font-size:19px;
line-height:42px;
position:relative;
text-indent:15px;
}
.dataTables_filter {
float: left;
left: 119px;
margin: 12px 0 22px 12px;
overflow: hidden;
position: absolute;
text-align: right;
top: -20px;
z-index: 5;
}

Answer 1

It's not entirely clear to me what you are trying to do but I think you are trying to lay the input on top of the first div.
That being the case, you will have to change the HTML structure and adjust the positioning of your input as follows:
JSfiddle Demo
Revised HTML
<div id="initialCondHdr" class="initialCondHdr">Demo Experiment
<div id="archiveTable_filter" class="dataTables_filter">
<label>
<input type="text" placeholder="Search" style="width:220px;height:30px;"/>
</label>
</div>
</div>
Revised CSS
#initialCondHdr{
color:#043751;
font-family:calibri;
font-size:19px;
line-height:42px;
position:relative;
text-indent:15px;
color:red; /* visual reference only */
}
.dataTables_filter{
overflow: hidden;
position: absolute;
opacity:0.5; /* visual reference only */
top:0;
text-align: right;
z-index: 1;
}