Internet Explorer 7 でブートストラップ ドロップダウンが他の要素の背後に表示されるのはなぜですか?

他の要素の背後に表示されるブートストラップ ドロップダウン [重複]

問題:

ブートストラップ 2.3 .1 では、特に Internet Explorer 7 では、高い z-index を割り当てているにもかかわらず、「dropdown-menu」クラスを使用して作成されたドロップダウン メニューがテキストやその他の要素の背後に表示されます。

診断:

この問題は、コンテキストの積み重ねの問題に起因します。ドロップダウンには Z インデックスがありますが、同じスタック コンテキスト内の要素にのみ適用されます。この場合、ドロップダウンの親要素には、新しいスタッキング コンテキストを確立するために明示的な Z インデックスと位置が必要です。

解決策:

次のように 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: 1;
}</code>

「.header-top」に「z-index:10000」と「position:relative」を設定することで、新しいスタッキングコンテキストが作成されます。このコンテキスト内のドロップダウン メニューには、そのコンテキスト内の他のコンテンツの前に配置されるように、「z-index: 1」が割り当てられます。これにより、目的の階層化が確立され、Internet Explorer 7 の問題が解決されます。

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