固定位置ヘッダーの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>`