title: Z-index not working on div on fixed position header
body: <p>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.</p>
  
  <p>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</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
              &lt;div class="col-lg-4 col-md-4 col-sm-2 col-xs-4"&gt;
                  &lt;div class="logo"&gt;
                      &lt;img src="images/logo.png" alt="logo" class="img-responsive" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
       &lt;div class="col-lg-8 col-md-8 col-sm-10 col-xs-8"&gt;
                  &lt;div class="col-md-6"&gt;
                      &lt;!--SearchBarStart--&gt;
                      &lt;div ng-controller="MyCtrl"&gt;
  
                          &lt;form&gt;
                              &lt;h3&gt;Search Here &lt;/h3&gt;
  
  
                              &lt;input type="text" class="form-control" id="SearchKeyword" ng-model="searchText" required="required" /&gt;
  
                              &lt;div class="list-group" id="Guide" ng-show="showLinks"&gt;
  
                                  &lt;a class="list-group-item" href="" ng-click="SearchType(0,true,'KeyWord', 1)"&gt;
                                      &lt;div class="input-group"&gt;
                                          &lt;span class="fa fa-suitcase"&gt;&lt;/span&gt;&lt;span style="padding-left: 20px"&gt;instruction goes here&lt;/span&gt;
                                      &lt;/div&gt;
                                  &lt;/a&gt;
                 &lt;/div&gt;
  
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
      &lt;/div&gt;
     &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>