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

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

ブートストラップ 2.3.1 では、「ドロップダウン メニュー」を使用してドロップダウン メニューを作成できます。クラス。ただし、z-index CSS プロパティを設定しているにもかかわらず、IE7 ではこれらのメニューが他の要素の背後に表示されるという問題が発生しました。

問題の理解: コンテキストの積み重ね

この問題を解決するには、コンテキストの積み重ねの概念を理解する必要があります。スタッキング コンテキストは、要素が HTML コードに表示される順序で積み重ねられる 3 次元空間です。ドロップダウン メニューが他の要素の背後に表示されているのは、カーソルを置く予定のオーバーレイとは異なるスタッキング コンテキストにあるためです。

問題の修正: スタッキング コンテキストの確立

ドロップダウン メニューのスタッキング コンテキストを確立するには、Z インデックスと位置を親要素に設定する必要があります。この場合、header-top div が適切な選択です。 CSS の変更は次のとおりです。

.header-top {
  z-index: 100;
  position: relative;
}

z-index を他の要素よりも高い値に設定し、位置を割り当てることにより、ヘッダー上部 div はドロップダウン メニュー用の新しいスタッキング コンテキストを作成します。これにより、メニューが他のすべての要素の上に表示されます。

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