Z-index 不适用于固定位置标题上的 div答案

【问题标题】：Z-index not working on div on fixed position headerZ-index 不适用于固定位置标题上的 div
【发布时间】：2017-09-09 15:02:56
【问题描述】：

我在 asp.net 4.0 中有一个使用母版页的页面。我的母版页有一个带有搜索框的标题。标题的 css 位置固定，z-index 为 10。

我正在尝试创建一个搜索指令，该指令将在用户键入任何内容时打开。我的说明框没有显示为浮动标题，而是在标题内打开并展开它。这是我的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>

【问题讨论】：

我还为元素#guide 尝试了更大的 z-index。但这也行不通

标签： css z-index master-pages

【解决方案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>`

【讨论】：