twitter-bootstrap twitter bootstrap 下拉菜单在元素下弹出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12653598/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap dropdown popping under elements
提问by amirpc
You can see in this screenshot, the menu containing "hi" on each line is popping under body elements and also under a button on the screen.
您可以在此屏幕截图中看到，每行包含“hi”的菜单在 body 元素下以及屏幕上的按钮下弹出。
The dom structure looks like so:
dom 结构如下所示：
The computed style of the dropdown element when open is:
打开时下拉元素的计算样式为：
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;
Here is one of the items that pops "over" the dropdown menu's computed style:
这是弹出下拉菜单的计算样式的项目之一：
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;
I can't seem to strike upon the right dom & css magic to make this work right. I've been playing the position in the dom heirarchy while inside the navbar of the dropdown div. I've also been playing with z-index on both the dropdown, the dropdown-menu and the elements that are popping over.
我似乎无法找到正确的 dom 和 css 魔法来使这项工作正常进行。在下拉 div 的导航栏中，我一直在玩 dom 层次结构中的位置。我还在下拉菜单、下拉菜单和弹出的元素上使用 z-index。
I feel a bit like there is something fundamental I'm not seeing here. Any thoughts?
我觉得有一些基本的东西我在这里没有看到。有什么想法吗？
回答by Jeff
I ran into a similar problem. I was able to fix it by removing the 'collapse' class from the nav-collapse element.
我遇到了类似的问题。我能够通过从导航折叠元素中删除“折叠”类来修复它。
I didn't really look further into the problem but that fixed it for me.
我并没有真正深入研究这个问题，但这为我解决了这个问题。
回答by amirpc
Figured it out, the problem was I had a transform3d on the navbar:
想通了，问题是我在导航栏上有一个 transform3d：
-webkit-transform: translate3d(0, 0, 0);
Removing this fixed it. I noticed that when I removed the translate3d that the computed style of the navbar would cause the z-index to go from 0 to auto.
删除它修复了它。我注意到当我删除 translate3d 时，导航栏的计算样式会导致 z-index 从 0 变为 auto。
Not sure if this is intended behavior?
不确定这是否是预期行为？
Hope this helps someone else down the line.
希望这可以帮助其他人。
回答by erik
It's a z-index problem.
这是一个 z-index 问题。
Make sure that the navbar is higher then the rest of the elements.
确保导航栏高于其余元素。
回答by Felix B?hme
I found my similar issue was due to opacity on a parent element being set to below 1.
我发现我的类似问题是由于父元素的不透明度设置为低于 1。
回答by OldTrain
Add css to parent element
将css添加到父元素
overflow:visible;
回答by dave317
Using answers posted here I did the following....On my _Layout.cshtml I added
使用这里发布的答案我做了以下....在我的 _Layout.cshtml 上我添加了
style="position: relative; z-index: 999;" to my container body-content div (just before RenderBody()) so it looks like this:
风格=“位置：相对；z-index：999；” 到我的容器 body-content div（就在 RenderBody() 之前），所以它看起来像这样：
<div class="container body-content" style="position: relative; z-index: 999; ">
@RenderBody()
回答by David Salcer
True, as arnirpc proposed the
没错，正如 arnirpc 提出的
-webkit-transform: translate3d(0, 0, 0);
does this trouble. But I had to use this because of Bootstrap Dynamic Pills and Tabs also with dropdown. Seen here: Pills with dropdowns
这个麻烦吗。但是我不得不使用它，因为 Bootstrap Dynamic Pills 和 Tabs 也带有下拉菜单。在这里看到：带下拉菜单的药丸
So removing the translate would shift the dropdown box above the button of Dropdown - and thats what you do not want.
因此，删除翻译会将下拉框移动到下拉按钮上方 - 这就是您不想要的。
But the dropdown of Bootstrap 4 pills is defaultly not even working since the dropdown is hiding behind the TAB-Content and does not matter if its a H1, text or image.
但是 Bootstrap 4 药丸的下拉菜单默认甚至不起作用，因为下拉菜单隐藏在 TAB 内容后面，无论是 H1、文本还是图像都无关紧要。
So I tried the z-index thing on many things of the content the LI, UL, container etc. Nothing.
所以我在 LI、UL、容器等内容的许多方面尝试了 z-index 的东西。什么都没有。
Soltion for me:in this case it was just putting a z-index-minus-1 (or any class with z-index: -1) on the inner content.
我的解决方案：在这种情况下，它只是在内部内容上放置一个 z-index-minus-1（或任何具有 z-index: -1 的类）。
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane p-3 fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="row">
<div class="col-sm-4 z-index-minus-1"> <!-- HERE -->
