0

Twitter のブートストラップ ドロップダウン メニューがアイテムの下に隠れてしまい、透明度にも問題があります。例: 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>

重なっている写真で変更されているように見える唯一のことは、小さなメディア クエリのマージンとパディングです。

4

2 に答える 2

3

したがって、答えは、デフォルトのブートストラップ カルーセルで位置を相対に設定する必要があるということでした。そのため、z-index プロパティの影響を受けませんでした。

position: relative; z-index:-1;
于 2013-04-24T14:50:15.217 に答える
0

z-index 設定が見つからない場合でも、後で CSS に同じ名前の別のクラスまたは ID を記述して、いつでもオーバーライドできます。そこに別の z-index を作成するだけです。一番上の要素の z-index を低く設定し、一番下の要素の z-index を高く設定してみてください。

于 2013-04-23T18:53:12.190 に答える