Bootstrap下拉菜单出现在其他元素后面 – IE7
我正在使用Bootstrap 2.3.1 http://twitter.github.io/bootstrap/index.html
所以我使用他们的“下拉菜单”类来创build一些简单的快速使用下拉菜单，但由于某种原因在IE7上，他们出现在我的网站上的文本和其他元素后面。
testing链接： http : //leongaban.com/_projects/defakto/CDS/
我添加了z-index到我的CSS，但似乎还没有做任何事情，请帮助！
.header .header-nav ul#nav-account ul.dropdown-menu, .header .header-nav ul#nav-library ul.dropdown-menu { z-index: 10000; } IE9，Chrome，FF等现代无头疼浏览器： 
IE7> 🙁 
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>
它是一个堆栈上下文问题！
即使您在下拉菜单上使用z-index ，它也只是与相同堆叠上下文中的元素有关。 你需要添加一个z-index和一个position到父元素为了得到这个工作。 在这种情况下，我会build议header-top div
你只能在定位的元素（相对，固定/绝对）上使用z-index ，所以尝试添加：
.header .header-nav ul#nav-account ul.dropdown-menu, .header .header-nav ul#nav-library ul.dropdown-menu { position: relative; z-index: 10000; }
在最新版本的UI-Bootstrap lib上查看“ append-to vs. append-to-body vs. inline example ”。
如果增加父元素的z-index（如其他答案中提到的）不适合你，那么可能是父元素之一有“overflow：hidden”。 尝试删除它，看看它是否工作。
只是使溢出作为inheritance或可见。
它会解决问题。
overflow: visible !important;
它非常适合我
