twitter bootstrap下拉彈出元素

您可以在此屏幕截圖中看到，每行上包含「hi」的菜單彈出在body元素下，並且也在屏幕上的按鈕下面。twitter bootstrap下拉彈出元素

popping under

DOM結構看起來像這樣：

dom structure

下拉元素時開放的計算風格：

background-color: transparent; 
color: #999; 
display: block; 
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
font-size: 14px; 
height: 20px; 
line-height: 20px; 
margin-bottom: 0px; 
margin-left: 0px; 
margin-right: 0px; 
margin-top: 0px; 
overflow-x: visible; 
overflow-y: visible; 
position: relative; 
width: 1425px;

以下是項目的一個彈出「下拉菜單的計算風格」：

box-sizing: border-box; 
color: white; 
cursor: pointer; 
display: inline-block; 
height: 22px; 
line-height: 17px; 
list-style-image: none; 
list-style-position: outside; 
list-style-type: none; 
overflow-x: visible; 
overflow-y: visible; 
vertical-align: middle; 
width: 74px; 
word-spacing: 0px;

我似乎無法攻擊右邊的dom & css魔術使這項工作正確。在下拉div的導航欄內，我一直在dom heirarchy中扮演角色。我在下拉菜單，下拉菜單以及彈出的元素上也玩過z-index。

我覺得有點像我在這裏沒有看到的基本東西。有什麼想法嗎？

來源

2012-09-29 amirpc

想通了，問題是我對導航欄的Transform3D一個：

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

刪除這個固定。我注意到當我刪除translate3d時，導航欄的計算樣式會導致z-index從0變爲auto。

不確定這是否爲預期行爲？

希望這可以幫助別人。

來源

2012-09-29 14:56:37 amirpc

這是一個z-index問題。

確保導航欄高於其餘元素。

來源

2012-09-29 14:49:02 erik

+1是，導航欄具有Z指數：1000，因此，如果你的元素是由它隱藏，只要使用z指數大於1000！ https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L4065 – Caumons

我遇到了類似的問題。我可以通過從nav-collapse元素中刪除'collapse'類來修復它。

我真的沒有看到進一步的問題，但爲我解決了這個問題。

來源

2012-10-17 03:15:30 Jeff

我發現我類似的問題被設定爲低於1

來源

2014-11-14 21:15:16

經過數小時的失敗之後，這個答案讓我免於跳臺了。謝謝！ – 1252748

添加CSS來的父元素

overflow:visible;

來源

2015-01-29 10:49:57 OldTrain

使用貼在這裏的答案我做了以下不透明度是由於父元素上...在我的_Layout.cshtml上添加了

style =「position：relative; z-index：999;」我的容器主體內容的div（之前RenderBody（）），所以它看起來是這樣的：

<div class="container body-content" style="position: relative; z-index: 999; "> 
     @RenderBody()

來源

2016-07-22 03:57:09 dave317

twitter bootstrap下拉彈出元素

回答

相關問題