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

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

Web サイト上の他の要素の背後にブートストラップ ドロップダウン メニューが表示される問題に直面しています。 IE7では。これを解決するには、CSS のスタッキング コンテキストの概念を理解する必要があります。

スタッキング コンテキストでは、要素は z-index プロパティに基づいて相互に相対的に配置されます。ただし、現在のスタッキング コンテキストの外側にある要素は、それと対話しません。あなたの場合、ドロップダウン メニューは、同じスタック コンテキストにないため、他の要素の上に表示されません。

これを修正するには、ドロップダウン メニューの親要素に z-index プロパティを追加します。これにより、新しいスタッキング コンテキストが作成され、ドロップダウン メニューが他の要素の上に表示されるようになります。 HTML コードでは、.header-top div がこれに適した親要素です。

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

これにより、ドロップダウン メニューにスタック コンテキストが確保され、ページ上の他の要素の上に表示できるようになります。 .

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