借助Bootstrap 4堆叠式固定顶部导航栏，我们如何将下拉菜单置于前面？

Question

在Bootstrap 4页面上，我尝试使用一对固定顶部的导航栏，在其下方的<iframe>填充了剩余的空间。运作正常，除了一个问题：上部导航栏中的下拉菜单显示在下部导航栏的下方。

This page重现了该问题。在Firefox 63和Chromium 70中查看时，结果如下：

（请原谅“ Stuff Goes Here”位的深色导航栏）

我猜测我需要进行一些zindex调整，但是我不确定为什么需要进行调整（两个导航栏都已经不在同一Z索引上了吗？），以及如何调整。

Answer 1

您可以在fixed-top-2上设置z-index。.

.fixed-top-2 {
    z-index: 99;
}

https://www.codeply.com/go/9mGKiDSFJ3

Answer 2

为类.fixed-top-2添加一个z索引，您可以使用top来代替margin-top。

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