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 means "Ignore all the positioning instructions from left, top, z-index, etc."