css - 使用 Bootstrap 4 Stacked Fixed-Top Navbars，我们如何保持下拉菜单在前面？

Question

在 Bootstrap 4 页面上，我尝试使用一对固定顶部导航栏，带有 <iframe>在他们下面填满了剩余的空间。它运行良好，除了一个问题:上方导航栏中的下拉菜单出现在下方导航栏下方。

This page重现问题。以下是在 Firefox 63 和 Chromium 70 中查看的结果:

(请原谅“Stuff Goes Here”位的深色导航栏上的深色文本)

我猜我需要做一些 zindex调整或类似的调整，但我不确定为什么需要这样做(两个导航栏不应该已经在同一个 Z 索引处吗？)以及如何。

Answer 1

为 .fixed-top-2 类添加一个 z-index，您可以使用 top 而不是 margin-top。

.fixed-top-2 {
    /* margin-top: 62px; */
    top: 62px;
    z-index: 90;
}