Z-index 未在固定位置 div 上工作 header

Question

我有一个页面使用 asp.net 4.0 中的母版页。我的主页有 header，其中有一个搜索框。 Header 固定了 css 个位置并且 z-index 10.

我正在尝试创建一个搜索指令，它会在用户键入任何内容时打开。我的指令框在 header 上不显示为浮动，而是在 header 内打开并展开。这是我的 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 会将其放入文档流中，从而占用 space，而 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>`

Z-index 未在固定位置 div 上工作 header

Z-index not working on div on fixed position header

css

master-pages

z-index