고정 위치 헤더의 div에서 Z- 인덱스가 작동하지 않습니다.

Question

asp.net 4.0에서 masterpage를 사용하는 페이지가 있습니다. 내 masterpage에는 검색 창이있는 머리글이 있습니다. 헤더의 CSS 위치가 고정되어 있고 Z- 인덱스가 10입니다.

사용자 입력시 열리는 검색 명령을 만들려고합니다. 내 지시 상자가 헤더를 통해 floatig로 표시되지 않고 헤더 내부에서 열리고 확장됩니다. 여기 내 CSS와 HTML

header { 
 
    width:100%; 
 
    display:inline-block; 
 
    background-color:#ef4023; 
 
    position:fixed; 
 
    z-index:10; 
 
} 
 

 
header #Guide { 
 
     width: 100%; 
 
     z-index: 5; 
 
     margin-right: -1px; 
 
position:relative; 
 
     background: #eee; 
 
     border: 1px solid #ccc; 
 

 
    }

<header> 
 
      <div class="col-lg-4 col-md-4 col-sm-2 col-xs-4"> 
 
       <div class="logo"> 
 
        <img src="images/logo.png" alt="logo" class="img-responsive" /> 
 
       </div> 
 
      </div> 
 
    <div class="col-lg-8 col-md-8 col-sm-10 col-xs-8"> 
 
       <div class="col-md-6"> 
 
        <!--SearchBarStart--> 
 
        <div ng-controller="MyCtrl"> 
 

 
         <form> 
 
          <h3>Search Here </h3> 
 

 

 
          <input type="text" class="form-control" id="SearchKeyword" ng-model="searchText" required="required" /> 
 

 
          <div class="list-group" id="Guide" ng-show="showLinks"> 
 

 
           <a class="list-group-item" href="" ng-click="SearchType(0,true,'KeyWord', 1)"> 
 
            <div class="input-group"> 
 
             <span class="fa fa-suitcase"></span><span style="padding-left: 20px">instruction goes here</span> 
 
            </div> 
 
           </a> 
 
       </div> 
 

 
         </form> 
 
        </div> 
 
       </div> 
 
    </div> 
 
    </header>

Answer 1

당신은 위치 설정을 따라와, 명령 상자도 position: fixed를 사용할 필요가 있습니다. (relative하여 공간을 차지, 문서 흐름에 넣어 것입니다, 당신은 그것을 위해 상대 부모를 가지고 있지 않기 때문에 absolute이 작동하지 않습니다.)

header { 
 
    width: 100%; 
 
    display: inline-block; 
 
    background-color: #ef4023; 
 
    position: fixed; 
 
    z-index: 10; 
 
} 
 

 
header #Guide { 
 
    width: 100%; 
 
    z-index: 15; 
 
    margin-right: -1px; 
 
    position: fixed; 
 
    top: 110px; 
 
    left: 0px; 
 
    background: #eee; 
 
    border: 1px solid #ccc; 
 
}

<header> 
 
    <div class="col-lg-4 col-md-4 col-sm-2 col-xs-4"> 
 
    <div class="logo"> 
 
     <img src="images/logo.png" alt="logo" class="img-responsive" /> 
 
    </div> 
 
    </div> 
 
    <div class="col-lg-8 col-md-8 col-sm-10 col-xs-8"> 
 
    <div class="col-md-6"> 
 
     <!--SearchBarStart--> 
 
     <div ng-controller="MyCtrl"> 
 

 
     <form> 
 
      <h3>Search Here </h3> 
 

 

 
      <input type="text" class="form-control" id="SearchKeyword" ng-model="searchText" required="required" /> 
 

 
      <div class="list-group" id="Guide" ng-show="showLinks"> 
 

 
      <a class="list-group-item" href="" ng-click="SearchType(0,true,'KeyWord', 1)"> 
 
       <div class="input-group"> 
 
       <span class="fa fa-suitcase"></span><span style="padding-left: 20px">instruction goes here</span> 
 
       </div> 
 
      </a> 
 
      </div> 
 

 
     </form> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</header>`