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

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

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

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

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

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