Bootstrap 下拉菜单的 z 索引问题

Question

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

一切正常，但我遇到了下拉菜单项显示在其他页面元素后面而不是前面的问题。

如果页面上有任何带有

position: relative

 的内容（例如 jQuery UI 手风琴或谷歌图表），则下拉菜单将显示在其后面。尝试更改 dd 菜单和导航栏的 

z-index

，但没有任何区别。

我可以让菜单位于其他内容之上的唯一方法是将内容更改为

position: fixed;

 或 

z-index: -1;

，但这两种解决方案都会导致其他问题。

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

Answer 1

我的导航栏位于标题中，即

position: fixed

。我更改了标题上的 

z-index

，它现在可以工作了 - 我想我在容器上看起来不够高，无法最初设置 

z-index

。

Answer 2

Windows8 上的 IE 7，带有 Bootstrap 3.0.0。

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

固定

Answer 3

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

.navbar {
    position: static;
}

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

Answer 4

这将解决它

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

Answer 5

就我而言，除了

z-index

之外，我还必须在父母元素中设置

overflow: visible

Answer 6

我遇到了同样的问题，阅读本主题后，我解决了将其添加到我的 CSS 中的问题：

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

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

Answer 7

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

Answer 8

通过从导航栏中删除

-webkit-transform

 来解决：

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

掠夺自

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

Answer 9

只要给

position: relative; 
z-index: 999;

到导航栏

Answer 10

这为我解决了这个问题：

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

Answer 11

通过删除

transform: translateY(50%);

 属性解决了这个问题。

Answer 12

这对我有用：

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

Answer 13

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

Answer 14

我遇到了一种情况，带有 Bootstrap 下拉列表的按钮嵌入在 DataTables 行中。在这种情况下，我必须删除设置中的

fixedColumns: true

，因为这会将 

position: sticky

 注入到元素样式中。

不起作用：

$(document).ready(function () {
        var table = $('#order').DataTable({
            fixedColumns: true,
            fixedHeader: true, ...

工作了：

$(document).ready(function () {
            var table = $('#order').DataTable({
                fixedHeader: true, ...

Answer 15

我在这里参加聚会迟到了，但是对于使用引导程序

sticky-top

 类的任何人来说，请注意它的 z 索引高于为下拉菜单定义的值，因此其中的任何内容都会通过下拉菜单渗透。

https://github.com/twbs/bootstrap/issues/31747

这是我的场景，这里引用的其他答案

position: sticky

 让我明白了。

Answer 16

就我而言，这是因为我有一个 CSS 动画，其中

transform

 操作应用于父级 

<div>

。我通过将动画移动到不同的元素来解决这个问题。