Z-index not working on div on fixed position header

Question

I have a page using a masterpage in asp.net 4.0. My masterpage has header which has a search box. Header has css position fixed and have z-index 10.

I am trying to create a search instruction which will open when user types anything. my instruction box do not show as floatig over header instead it opens inside header and expands it. Here are my css and 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

You have to use position: fixed also on the instruction box, with according position settings. (relative will put it into the document flow, thereby taking up space, and absolute won't work since you don't have a relative parent for it.)

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>`