Bootstrap 绝对定位的 div 在导航栏上方未正确显示答案

【问题标题】：Bootstrap absolute positioned div not showing correctly above navbarBootstrap 绝对定位的 div 在导航栏上方未正确显示
【发布时间】：2016-07-14 20:01:32
【问题描述】：

我有一个来自导航栏的下拉菜单，由切换按钮触发。我在导航栏折叠上方添加了一个三角形，以显示它指向触发按钮。它在大屏幕上运行良好，但在移动设备上它一直被推到导航栏后面。我尝试过使用 z-index，但无济于事。

http://www.bootply.com/g8d0nLzlIE

我已将移动设备上的三角形设为灰色（而不是桌面上的白色）以显示对比度。

【问题讨论】：

嗨，Rachel，我经常看到你回答问题，这里你有自己的问题：) 为什么不将 .navbar-collapse.in 上的 overflow 规则重置为 visible？ .navbar-collapse.in {overflow-y: visible;}
嘿@UncaughtTypeError 我不得不休息一下，因为我正在做一个新项目；）非常感谢这个想法！有用。你能把它作为一个答案，以便我可以将它标记为一个吗？
当然，没问题 - 添加:)
@UncaughtTypeError 您是否知道如何让三角形显示在菜单加载的过渡中，而不是在第二个延迟之后显示？
您可以改为fix 并将其从文档的自然流中取出，虽然这有点老套，但试试这个：.navbar-collapse:before {border-bottom: 20px solid #fff; border-left: 20px solid transparent; border-right: 20px solid transparent; top: 75px; content: ""; position: fixed; left: 28px; margin-left: -10px; width: 0;height: 0;} - 仍然可以为您指明正确的方向跨度>

标签： html css twitter-bootstrap

【解决方案1】：

在移动分辨率上，您可以将为.navbar-collapse.in 声明的overflow 规则重置为visible。

CSS

.navbar-collapse.in {
    overflow-y: visible;
}

【讨论】：