z-index 속성이 작동하지 않습니다

Question

초기 조건 헤더 div에 in put textbox의 위치를 ​​설정하고 싶습니다. 하지만 그 텍스트 상자는 초기 조건 div 아래에 숨어지고있다. Z- 인덱스에 대한 대안이 있습니까? 나는 또한 내 CSS를 첨부했습니다.

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

그것은 당신이하려고하지만 난 당신이 입력을 마련하기 위해 노력하고있다 생각 무엇을 나에게 완전히 분명하지 않다 첫 번째 div 상단에

케이스를 다음과 같이있는 것은, 당신은 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> 

개정 CSS를

JSfiddle Demo

개정 HTML

#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; 
}