twitter bootstrap 下拉 z-index 和透明度可见性问题

Question

我的 twitter 引导下拉菜单隐藏在项目下方以及它的透明度方面遇到了问题。示例：http://pictorious-web-qa.herokuapp.com

1. 当屏幕出现时，菜单 z-index 位于个人资料照片下方 缩小到大约 400px 宽。我检查了媒体查询，但是 找不到任何 z-index 设置。

   请参阅http://pictorious-web-qa.herokuapp.com/profiles/albert 例子。

2. 我想在菜单导航中保持半透明，但想提高 下拉菜单项的实心不透明度。我已经设置了不透明度 直接菜单容器，但这似乎没有改变任何东西。

3. 菜单上的 vimeo 视频也有 z-index 问题 页面http://www.pictorious.com 如果你缩小屏幕宽度 导航栏菜单与视频重叠的位置。我也试过 将 z-index 设置为无济于事，并且不确定如何设置 wmode vimeo 默认 iframe 嵌入技术

这是一个标准的 twitter 引导导航：

<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="/">Pictorious!</a>
      <div class="btn-group pull-right" id="nav-login">
            <a class="btn"  href="/login">Sign-In</a>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="/">Home</a></li>
          <li><a href="/challenges">Challenges</a></li>
                    <li><a href="/about">About</a></li>

                        <form class="navbar-search pull-left form-search" action="/search">
                            <input type="text" class="search-query span2" placeholder="Search" name="keyword">
                        </form>
                    </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>

重叠照片上似乎唯一发生变化的是较小媒体查询的边距和填充。

Answer 1

所以答案是我需要在默认引导轮播中将位置设置为相对，这就是它不受我的 z-index 属性影响的原因。

position: relative; z-index:-1; 

Answer 2

即使您找不到 z-index 设置，您也可以通过稍后在 CSS 中编写另一个同名的类或 ID 来覆盖它们——只需在此处创建另一个 z-index。尝试将顶部元素的 z-index 设置得较低，并将底部元素的 z-index 设置得较高。