引导4下拉菜单隐藏并闪烁

Question

我看过其他帖子，但它们看起来都是3-4岁，Bootstrap/Popper有很多变化。

我在Bootstrap 4中有一个菜单下拉列表，它位于一个容器中，其中包含一个transform/translate2d。当下拉菜单出现时，它在页面上的另一个容器下面(不管z索引)，当我移动鼠标时，它会闪烁一串。这发生在Chrome和Firefox中，因此我认为这与Bootstrap及其Popper.js的使用有关。

如果我删除下拉菜单所在的大容器上的transform/translate3d，一切都很好.

下面是一个示例；只需单击下拉箭头就可以看到重叠问题。然后你把鼠标移到“最小计数”行的末端，看到一些闪烁。如果您注释掉这条CSS行，它可以正常工作。

transform: translate3d(0%, -8px, 0);

https://jsfiddle.net/paultechguy/mtcbLt5t/30/

Answer 1

经过大量调查，这是浏览器的“堆叠上下文”的一个问题。Bootstrap 4/ Popper.js下拉菜单执行CSS转换/translate3d，这就是罪魁祸首。要解决这些问题，请进行以下CSS更改：

具有下拉菜单的容器的父元素(这是下拉菜单中的两个)：

position: relative;
z-index: 10;

然后，在具有下拉菜单的容器上：

z-index: 20; /* a value higher then the 10 above */

希望这对其他人有帮助。