IE7 でブートストラップ ドロップダウンが他のコンテンツの背後に表示されるのはなぜですか?

他のコンテンツの背後に表示されるブートストラップ ドロップダウン

質問:

ブートストラップ ドロップダウンが他のコンテンツの背後に表示され続けるページ要素 (特に IE7)。関連する CSS に z-index を適用しても、問題は解決しません。

回答:

この動作は、スタッキング コンテキストの問題に起因します。 z-index は同じスタック コンテキスト内の要素に影響しますが、ドロップダウンは z-index プロパティとposition プロパティの両方を備えたコンテナ内に配置する必要があります。

解決策:

変更ヘッダー上部 div の CSS は次のようになります:

<code class="css">.header-top {
  z-index: 10000;
  position: relative;
}

.header .header-nav ul#nav-account ul.dropdown-menu,
.header .header-nav ul#nav-library ul.dropdown-menu {
  z-index: 10000;
}</code>

ヘッダー上部 div の z-index と位置を設定することで、ドロップダウンが常駐する新しいスタッキング コンテキストを確立し、常にドロップダウンが存在するようにします。ページコンテンツの前に表示されます。

以上がIE7 でブートストラップ ドロップダウンが他のコンテンツの背後に表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。