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下拉弹出元素

回答

相关问题