twitter bootstrap下拉z-index和透明度可見性問題

Question

我的Twitter Bootstrap下拉菜單隱藏在項目下方，並且透明度也不佳。 示例： http ： //pictorious-web-qa.herokuapp.com

1. 當屏幕縮小到大約400px寬時，菜單z-index會在個人資料照片下方。 我檢查了媒體查詢，但找不到任何z-index設置。

   有關示例，請參見http://pictorious-web-qa.herokuapp.com/profiles/albert 。

2. 我想在菜單導航中保持半透明，但要增加下拉菜單項的穩定不透明度。 我直接在菜單容器上設置了不透明度，但這似乎並沒有改變任何東西。

3. 如果將屏幕寬度縮小到導航欄菜單與視頻重疊的位置，則菜單在主頁http://www.pictorious.com上的vimeo視頻也存在z-index問題。 我也嘗試將z-index設置為無效，並且不確定如何在vimeo默認iframe嵌入技術中設置wmode

這是標准的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設置為較高。