twitter-bootstrap twitter bootstrap 下拉菜单的 z-index 问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13916326/
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
z-index issue with twitter bootstrap dropdown menu
提问by Leon
I'm using twitter bootstrap dropdown menu in a fixed navbar at the top of my page.
我在页面顶部的固定导航栏中使用 twitter bootstrap 下拉菜单。
It all works fine but am having issues with the drop down menu items showing behind other page elements rather than in front of them.
一切正常，但下拉菜单项显示在其他页面元素后面而不是在它们前面时出现问题。
If I have anything on the page with position: relative(like jquery ui accordion, or a google chart) then the drop down menu shows behind it. Tried changing the z-indexof the dd menu and of the nav-bar, but doesn't make any difference.
如果我在页面上有任何内容position: relative（如 jquery ui 手风琴或谷歌图表），那么下拉菜单会显示在它后面。尝试更改z-indexdd 菜单和导航栏的 ，但没有任何区别。
The only way I can get the menu to sit above the other content is to change the content to position: fixed;OR z-index: -1;-but both of these solutions cause other problems.
我可以让菜单位于其他内容之上的唯一方法是将内容更改为position: fixed;OR z-index: -1;-但这两种解决方案都会导致其他问题。
Appreciate any help you can give me.
感谢您能给我的任何帮助。
I think this is probably some standard issue with CSS positioning that I've misunderstood, so haven't posted any code, but can do if needed.
我认为这可能是我误解的 CSS 定位的一些标准问题，所以没有发布任何代码，但如果需要可以做。
Thanks.
谢谢。
回答by Leon
Just realized what's going on.
刚刚意识到发生了什么。
I had the navbar inside a header which was position: fixed;
我在标题内有导航栏position: fixed；
Changed the z-indexon the header and it's working now - guess I didn't look high enough up the containers to set the z-indexinitially !#@!?
更改了z-index标题上的 ，现在可以使用了 - 猜猜我在容器上看起来不够高，无法设置z-index最初的 !#@!？
Thanks.
谢谢。
回答by Primo? Klemen?ek
IE 7 on windows8 with bootstrap 3.0.0.
带有引导程序 3.0.0 的 Windows8 上的 IE 7。
.navbar {
position: static;
}
.navbar .nav > li {
z-index: 1001;
}
fixed
固定的
回答by rdoll
Ran into the same bug here. This worked for me.
在这里遇到了同样的错误。这对我有用。
.navbar {
position: static;
}
By setting the position to static, it means the navbar will fall into the flow of the document as it normally would.
通过将位置设置为静态，这意味着导航栏将像往常一样落入文档流中。
回答by parkerproject
This will fix it
这将解决它
.navbar .nav > li {
z-index: 10000;
}
回答by Luke Ollett
Solved by removing the -webkit-transformfrom the navbar:
通过-webkit-transform从导航栏中删除来解决：
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
pillaged from https://stackoverflow.com/a/12653766/391925
回答by Thomas Decaux
Still the issue with Bootstrap v3, navbar and dropdown have same z-index ;-( I just increased .dropdown-menu z-index to 1001.
Bootstrap v3 的问题仍然存在，导航栏和下拉菜单具有相同的 z-index ;-( 我只是将 .dropdown-menu z-index 增加到 1001。
回答by Fernando Vieira
I had the same problem and after reading this topic, I've solved adding this to my CSS:
我遇到了同样的问题，在阅读了这个主题后，我已经解决了将它添加到我的 CSS 中的问题：
.navbar-fixed-top {
z-index: 10000;
}
because in my case, I'm using the fixed top menu.
因为就我而言，我使用的是固定的顶部菜单。
回答by JochenJung
This fixed it for me:
这为我修复了它：
.navbar-wrapper {
z-index: 11;
}
回答by thouliha
This worked for me:
这对我有用：
.dropdown, .dropdown-menu {
z-index:2;
}
.navbar {
position: static;
z-index: 1;
}
回答by kabangi julius
Solved this issue by removing transform: translateY(50%);property.
通过删除transform: translateY(50%);属性解决了这个问题。
