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

Posted 2023-02-24

【中文标题】twitter bootstrap 下拉菜单的 z-index 问题

【英文标题】：z-index issue with twitter bootstrap dropdown menu

【发布时间】：2012-12-04 16:14:30

【问题描述】：

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

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

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

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

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

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

谢谢。

【问题讨论】：

在***.com/questions/16149701/…查看我的回答

【参考方案1】：

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

【参考方案2】：

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

【参考方案3】：

只要给

position: relative; 
z-index: 999;

到导航栏

【讨论】：

这对我有用，但您不需要将 z-index 属性设置为 999。您可以将其设置为 2。

【参考方案4】：

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

【参考方案5】：

刚刚意识到发生了什么。

我有一个标题内的导航栏position: fixed;

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

谢谢。

【讨论】：

我有一个类似的问题，原来是由父 div 上的“溢出：隐藏”引起的。该解决方案对我来说很容易，因为在查看它之后，我确定我不再需要溢出：隐藏，所以我将其删除。

你救了我的神经。谢谢。

@ScottForsyth-MVP 我略过了你的评论思考......溢出：隐藏 - 这不是我的问题 - 我的都是关于 z-index 的。因此，我访问了 MDN 上有关堆叠上下文的页面（强烈推荐），并仔细浏览了我的站点，并仔细设置了位置并更正了 z 索引。菜单仍然被切断。然后我注意到溢出：隐藏在 css 检查器中，它让我想起了你的评论 - 就是这样！

虽然我在 DOM 和元素中的结构略有不同，但最终对我来说解决方案是更改包含下拉元素的元素的 z-index。谢谢！

@ScottForsyth-MVP 谢谢！你的评论拯救了我的生活：D

【参考方案6】：

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

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

盗自https://***.com/a/12653766/391925

【参考方案7】：

这对我有用：

.dropdown, .dropdown-menu 
  z-index:2;

.navbar 
  position: static;
  z-index: 1;

【参考方案8】：

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

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

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

【参考方案9】：

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

.navbar 
    position: static;

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

【讨论】：

对我有用，没有副作用。

【参考方案10】：

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

.navbar 
  position: static;

.navbar .nav > li 
  z-index: 1001;

固定

【参考方案11】：

这为我解决了问题：

.navbar-wrapper 
  z-index: 11;

【参考方案12】：

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

【讨论】：

我只是将 .dropdown-menu z-index 增加到 1001。解决方法是增加这个值。对不起我的英语不好^^

啊……那我误会你了，对不起。您可能会考虑在回答中稍微澄清一下（就像您在评论中所做的那样：-)

【参考方案13】：

这会解决它

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

【讨论】：

这将导致引导模式对话框出现问题，因为 modal-backdrop 的 z-index 值较低。