web-dev-qa-db-ja.com

Twitter bootstrapドロップダウンメニューのz-indexの問題

ページ上部の固定ナビゲーションバーでTwitter bootstrapドロップダウンメニューを使用しています。

すべて正常に動作しますが、ドロップダウンメニュー項目が他のページ要素の前ではなく後ろに表示されるという問題があります。

ページにposition: relative（jquery uiアコーディオン、またはGoogleチャートなど）が含まれている場合、ドロップダウンメニューがその背後に表示されます。 ddメニューとナビゲーションバーのz-indexを変更しようとしましたが、違いはありません。

メニューを他のコンテンツの上に配置できる唯一の方法は、コンテンツをposition: fixed; OR z-index: -1;に変更することですが、これらの解決策は両方とも他の問題を引き起こします。

あなたが私に与えることができる助けを感謝します。

これはおそらく、私が誤解したCSSポジショニングの標準的な問題であるため、コードを投稿していないが、必要に応じて行うことができると思います。

ありがとう。

drop-down-menutwitter-bootstrapz-index
51
Leon

何が起こっているのか気づきました。

ヘッダーにposition: fixed;というnavbarがありました。

ヘッダーのz-indexを変更し、現在機能しています-最初にz-indexを設定するのに十分な高さではなかったと思います！＃@ !?

ありがとう。

42
Leon

bootstrap 3.0.0を使用するwindows8上のIE 7。

.navbar {
  position: static;
}
.navbar .nav > li {
  z-index: 1001;
}

一定

14
Primož Klemenšek

ここで同じバグに遭遇しました。これは私のために働いた。

.navbar {
    position: static;
}

位置を静的に設定することにより、ナビゲーションバーが通常どおりドキュメントのフローに落ちます。

9
rdoll

これで修正されます

.navbar .nav > li {
z-index: 10000;
}
8
parkerproject

私は同じ問題を抱えていました。このトピックを読んだ後、これをCSSに追加して解決しました。

.navbar-fixed-top {
    z-index: 10000;
}

私の場合、固定トップメニューを使用しているためです。

2
Fernando Vieira

-webkit-transformをnavbarから削除することで解決しました：

-webkit-transform: translate3d(0, 0, 0);

https://stackoverflow.com/a/12653766/391925 から略奪

2
Luke Ollett

それでもBootstrap v3、navbar、およびdropdownの問題は同じz-indexを持っています;-( .dropdown-menu z-indexを1001に増やしました。

2
Thomas Decaux

これは私のためにそれを修正しました：

.navbar-wrapper {
  z-index: 11;
}
1
JochenJung

これは私のために働いた：

.dropdown, .dropdown-menu {
  z-index:2;
}
.navbar {
  position: static;
  z-index: 1;
}
0
thouliha

transform: translateY(50%);プロパティを削除して、この問題を解決しました。

0
kabangi julius