Question

我在asp.net 4.0中有一个使用母版页的页面。我的主页有标题，有一个搜索框。标题已将css位置固定并具有z-index 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>`

Z-index不在固定位置头上的div上工作

1 个答案: