Twitter bootstrap下拉菜单中的z-index问题

Question

我在页面顶部的固定导航栏中使用了twitter bootstrap下拉菜单。

这一切都运行正常，但是显示在其他页面元素后面而不是在它们前面的下拉菜单项有问题。

如果页面上有position: relative（如jquery ui手风琴或谷歌图表），那么下面的菜单会显示在其后面。尝试更改dd菜单和导航栏的z-index，但没有任何区别。

我可以让菜单位于其他内容之上的唯一方法是将内容更改为position: fixed;或z-index: -1; - 但这两种解决方案都会导致其他问题。

感谢你能给我的任何帮助。

我认为这可能是我误解的CSS定位的一个标准问题，所以没有发布任何代码，但如果需要可以做。

感谢。

Answer 1

刚刚意识到发生了什么。

我的导航栏位于标题position: fixed内;

更改了标题上的z-index并且它现在正在运行 - 猜测我的容器看起来不够高，最初设置z-index！＃@！？

感谢。

Answer 2

使用bootstrap 3.0.0在windows8上运行IE 7。

.navbar {
  position: static;
}
.navbar .nav > li {
  z-index: 1001;
}

固定

Answer 3

在这里遇到同样的错误。这对我有用。

.navbar {
    position: static;
}

通过将位置设置为静态，这意味着导航栏将像往常一样落入文档流中。

Answer 4

这将解决它

.navbar .nav > li {
z-index: 10000;
}

Answer 5

通过从导航栏中删除-webkit-transform来解决：

-webkit-transform: translate3d(0, 0, 0);

从https://stackoverflow.com/a/12653766/391925

掠夺

Answer 6

仍然是Bootstrap v3，导航栏和下拉列表的问题具有相同的z-index ;-（我只是将.dropdown-menu z-index增加到1001。

Answer 7

我遇到了同样的问题，在阅读完这个主题之后，我已经解决了将这个添加到我的CSS中的问题：

.navbar-fixed-top {
    z-index: 10000;
}

因为在我的情况下，我正在使用固定的顶级菜单。

Answer 8

这为我解决了这个问题：

.navbar-wrapper {
  z-index: 11;
}

Answer 9

这对我有用：

.dropdown, .dropdown-menu {
  z-index:2;
}
.navbar {
  position: static;
  z-index: 1;
}

Answer 10

通过删除transform: translateY(50%);属性来解决此问题。

Answer 11

只要给

position: relative; 
z-index: 999;

到导航栏

Answer 12

我遇到了同样的问题，因为我以NavBar风格忘记了这一点： 溢出：隐藏；

Answer 13

就我而言，除了 z-index 之外，我还必须在父元素中设置 overflow: visible