首頁 >web前端 >css教學 >為什麼我的引導下拉清單會出現在 Internet Explorer 7 中其他元素的後面?

為什麼我的引導下拉清單會出現在 Internet Explorer 7 中其他元素的後面?

Susan Sarandon
Susan Sarandon原創
2024-10-27 06:08:29480瀏覽

Why Do My Bootstrap Dropdowns Appear Behind Other Elements in Internet Explorer 7?

Bootstrap 下拉菜單出現在其他元素後面[重複]

問題:

在Bootstrap 2.3 中.1 中,使用「dropdown-menu」類別建立的下拉式選單特別出現在Internet Explorer 7 上的文字和其他元素後面,儘管分配了較高的z-index。

診斷:

問題源自於堆疊上下文問題。儘管下拉清單具有 z 索引,但它僅適用於同一堆疊上下文中的元素。在這種情況下,下拉清單的父元素需要明確的 z-index 和位置來建立新的堆疊上下文。

解決方案:

修改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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn