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."

Twitter Bootstrap Header中的Z-Index问题

1 个答案: