CSS 出现在其他元素后面的 Bootstrap 下拉菜单 - IE7
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16149701/
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
Bootstrap dropdowns menus appearing behind other elements - IE7
提问by Leon Gaban
I'm using Bootstrap 2.3.1 http://twitter.github.io/bootstrap/index.html
我正在使用 Bootstrap 2.3.1 http://twitter.github.io/bootstrap/index.html
So I'm using their 'dropdown-menu' class to create some simple quick use dropdown menus, but for some reason on IE7they are appearing behind text and other elements on my site.
所以我使用他们的“下拉菜单”类来创建一些简单的快速使用下拉菜单，但出于某种原因，它们在IE7上出现在我网站上的文本和其他元素后面。
Test Link:http://leongaban.com/_projects/defakto/CDS/
测试链接：http : //leongaban.com/_projects/defakto/CDS/
I added z-index to my CSS, but still doesn't seem to do anything, please help!
我在我的 CSS 中添加了 z-index，但似乎仍然没有做任何事情，请帮助！
.header .header-nav ul#nav-account ul.dropdown-menu,
.header .header-nav ul#nav-library ul.dropdown-menu {
z-index: 10000;
}
IE9, Chrome, FF and other modern no headache browsers:
IE9、Chrome、FF 等现代无头痛浏览器：
IE7 >:(
IE7 >:(
HTML
HTML
<div class="header-nav">
<ul id="nav-account" role="navigation" class="pull-right">
<!-- Language Dropdown Button -->
<li id="language-btn">
<a href="#" id="drop1" class="dropdown-toggle" data-toggle="dropdown">English</a>
<img src="img/header-small-down-arrow.png" alt="grey triangle"/><!-- <span class="grey_triangle"></span>-->
<!-- Language Dropdown Menu-->
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">English</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Spanish</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">German</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Japanese</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chinese</a></li>
</ul>
</li>
<!-- User Dropdown Button -->
<li id="account-btn">
<a href="#" id="drop2" class="dropdown-toggle" data-toggle="dropdown">Logout</a>
<img src="img/header-small-down-arrow.png" alt="grey triangle"/>
<!-- <span class="grey_triangle"></span> -->
<!-- User Dropdown Menu-->
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Logout</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Account</a></li>
</ul>
</li>
</ul>
回答by Blake Plumb
Its a stacking contextissue!
它是一个堆叠上下文问题！
Even though you are using z-indexon the dropdown, it is only relative to elements in the same stacking context. You need to add a z-indexand a positionto a parent element in order to get this to work. In this case I would recommend the header-topdiv
即使您z-index在下拉列表中使用，它也仅与同一堆叠上下文中的元素相关。您需要将 az-index和 a添加position到父元素才能使其工作。在这种情况下，我会推荐header-topdiv
回答by adrift
回答by el3ati2
If increasing the z-index of the parent element(as mentioned in other answers) did not work for you, it could be that one of the parent elements has "overflow: hidden;"Try removing it and see if it works.
如果增加父元素的 z-index（如其他答案中所述）对您不起作用，则可能是父元素之一具有“溢出：隐藏；” 尝试删除它，看看它是否有效。
回答by Ronak Bokaria
Just make overflow as inherit or Visible.
只需将溢出设置为继承或可见。
it will solve the problem.
它将解决问题。
overflow: visible !important;
overflow: visible !important;
It worked for me awesomely
它对我很有用
回答by tiago
Check out the "append-to vs. append-to-body vs. inline example" on the newest version of UI-Bootstrap lib.
查看最新版本的 UI-Bootstrap 库上的“附加到正文与附加到正文与内联示例”。
回答by Joey Levy
I had the same thing happen when using
我在使用时发生了同样的事情
overflow-x: hidden;
On the parent element. Had to turn it off.
在父元素上。不得不关掉它。
回答by ganesh pandey
it's resolved by adding in menu CSS.
它通过添加菜单 CSS 来解决。
position: relative;
z-index: 10000;
