drop-down-menu - twitter bootstrap 下拉菜单的 z-index 问题

Question

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

一切正常，但下拉菜单项显示在其他页面元素后面而不是在它们前面时出现问题。

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

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

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

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

谢谢。

score 56 · Accepted Answer

才明白怎么回事。

我在标题内有导航栏position: fixed；

更改了z-index标题，它现在可以工作了 - 猜我在容器上看起来不够高，无法设置z-index最初的 !#@!?

谢谢。

score 16 · Accepted Answer

带有引导程序 3.0.0 的 windows8 上的 IE 7。

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

固定的

score 10 · Accepted Answer

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

.navbar {
    position: static;
}

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

score 6 · Accepted Answer

6

这将解决它

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

于 2013-03-22T10:34:55.347 回答

score 3 · Accepted Answer

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

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

因为就我而言，我使用的是固定顶部菜单。

score 2 · Accepted Answer

Bootstrap v3 的问题仍然存在，导航栏和下拉菜单具有相同的 z-index ;-( 我刚刚将 .dropdown-menu z-index 增加到 1001。

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

2

在我的情况下，除了z-index我必须设置overflow: visible父母元素

于 2021-04-28T07:57:18.693 回答

score 1 · Accepted Answer

1

这为我修复了它：

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

于 2013-09-09T12:25:20.897 回答

score 1 · Accepted Answer

1

只要给

position: relative; 
z-index: 999;

到导航栏

于 2020-08-13T07:35:37.600 回答

score 0 · Accepted Answer

这对我有用：

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

score 0 · Accepted Answer

0

transform: translateY(50%);通过删除属性解决了这个问题。

于 2016-12-26T09:50:52.847 回答

score 0 · Accepted Answer

我遇到了同样的问题，就我而言，因为我在 NavBar 样式中忘记了这一点：溢出：隐藏；

13 回答 13