z-index與twitter引導下拉菜單問題

我在我的頁面頂部的固定導航欄中使用twitter引導下拉菜單。z-index與twitter引導下拉菜單問題

這一切工作正常，但我有下拉菜單項顯示在其他頁面元素後面，而不是在他們面前的問題。

如果我在頁面上有position: relative（如jquery ui手風琴，或谷歌圖表）的任何內容，那麼在它後面的下拉菜單中顯示。嘗試更改dd菜單和導航欄的z-index，但沒有任何區別。

我可以讓菜單坐在其他內容之上的唯一方法是將內容更改爲position: fixed;或z-index: -1;但這兩種解決方案都會導致其他問題。

感謝您給我的任何幫助。

我認爲這可能是CSS定位的一些標準問題，我誤解了，所以沒有發佈任何代碼，但可以根據需要做。

謝謝。

來源

2012-12-17 Leon

看到我的答案在http://stackoverflow.com/questions/16149701/bootstrap-dropdowns-menus-appearing-behind-other-elements-ie7/36063349#36063349 – tiago

剛剛意識到發生了什麼事情。

我有一個標題內的導航欄是position: fixed;

更改了標頭上的z-index，現在它正在工作 - 猜猜我沒有看起來足夠高，最初設置了z-index！＃@！？

謝謝。

來源

2012-12-17 14:52:59 Leon

+13

我有一個類似的問題，原來是由父級div上的「overflow：hidden」。這個解決方案對我來說很簡單，因爲在審查之後，我確定我不需要溢出：隱藏了，所以我將它刪除了。 –

你救了我的神經。謝謝。 – optim1st

@ ScottForsyth-MVP我掠過了你的評論思想。溢出：隱藏 - 這不是我的問題 - 我的全部都是關於z索引。所以我去了MDN頁面上的堆疊上下文（強烈推薦），並通過我的網站精心設置位置和正確的Z指數。菜單仍然被切斷。然後我注意到溢出：隱藏在CSS檢查器中，它提醒我你的評論 - 就是這樣！ –

這將修復它

.navbar .nav > li { 
z-index: 10000; 
}

來源

2013-03-22 10:34:55 parkerproject

這會引起模式對話框的啓動問題，因爲模式背景的z-index值較低。 –

從導航欄移除-webkit-transform解決：從https://stackoverflow.com/a/12653766/391925

來源

2013-05-28 16:38:53

仍與引導V3，導航欄和下拉問題掠奪

-webkit-transform: translate3d(0, 0, 0);

具有相同的z-索引;-(我剛增加.dropdown-menu z-index爲1001.

來源

2013-08-24 14:02:05

我剛剛將.dropdown-menu z-index增加到1001.解決方案是增加此值。對不起，我的英語不好^^ –

啊..然後我誤解了你，對不起。你可能會考慮在你的回答中稍微澄清一點（就像你在評論中所做的那樣:-) – kleopatra

這個固定對我來說：

.navbar-wrapper { 
    z-index: 11; 
}

來源

2013-09-09 12:25:20 JochenJung

遇到同樣的錯誤在這裏。這對我有效。

.navbar { 
    position: static; 
}

通過將位置設置爲靜態，這意味着導航欄將像通常那樣落入文檔流中。

來源

2013-09-11 09:18:44 rdoll

爲我工作，沒有任何副作用。 –

windows8上的IE 7與bootstrap 3.0.0。

.navbar { 
    position: static; 
} 
.navbar .nav > li { 
    z-index: 1001; 
}

固定

來源

2013-09-18 13:41:06

謝謝！非常好的答案。 – user1477388

我有同樣的問題和閱讀此主題後，我已經解決了這個添加到我的CSS：因爲在我的情況

.navbar-fixed-top { 
    z-index: 10000; 
}

，我使用的固定的頂級菜單。

來源

2014-03-26 16:58:54

這爲我工作：

.dropdown, .dropdown-menu { 
    z-index:2; 
} 
.navbar { 
    position: static; 
    z-index: 1; 
}

來源

2015-04-10 13:29:08 thouliha

通過去除transform: translateY(50%);物業解決了這個問題。

來源

2016-12-26 09:50:52

z-index與twitter引導下拉菜單問題

回答

相關問題