Twitter Bootstrap Header中的Z-Index问题

Question

我有以下代码创建一个Twitter Bootstrap标头.标题在功能上运行得很好但是当我使用较小的浏览器并且标题最小化到下拉菜单时,标题的背景不会显示在网页上的内容之前.因此,例如标题的文本将在前面,但图像和文本输入之类的内容显示在下拉背景前面.我没有更改任何twitter bootstrap css,这是我的HTML:

<div class="navbar navbar-fixed-top">
              <div class="navbar-inner">
                <div class="container">
                  <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </a>
                  <a class="brand" href="/">Exployre</a>
                  <div class="nav-collapse">
                    <ul class="nav">

                      <li><a href="/map">Find</a></li>
                      <li><a href="/shareadventure">Share</a></li>
                      <li><a href="/connect">Connect</a></li>
                      <li><a href="/posts">Discuss</a></li>
                      <li><a href="/profile">Profile</a></li>
                      <li><a href="/about">About</a></li>
                      <li>
                  <li>        
                <form action="/search" class="navbar-search">
                  <div>
                    <input type="text" placeholder="Search" class="search-query pull-right" name="q" size="55" />
                  </div>
                </form>
                  </li>

                    </ul>
                  </div><!--/.nav-collapse -->
                </div>
              </div>
            </div>

Answer 1

设计问题？也许(如果你没有改变css样式表中的任何内容)

这个选择器有这个CSS属性

.navbar-fixed-top, .navbar-fixed-bottom {
  position: fixed;
  /* other properties */
}

但在媒体查询得到这个之后

@media (max-width: 979px)
.navbar-fixed-top, .navbar-fixed-bottom {
  position: static;
}

这position: static;是罪魁祸首......它应该是relative/fixed或者只是删除它.

来源:

.... position:static表示"忽略来自left,top,z-index等的所有定位指令"