bootstrap 下拉菜单中的 z-index 不适用于变换

Question

我已经尝试使用转换的 bootstrap 下拉菜单的翻转菜单。翻转工作正常，但下拉菜单呈现在表单元素下方，即使下拉菜单存在 z-index。

阅读后，我了解了使用转换时的堆栈上下文问题，但我无法找出解决方案。

代码可在此处获得 code link。由于以下代码，z-index 不适用。

.frontbar {
    transform: translateY(0%) rotateX(0deg);
    transition: all 0.5s;
    transform-origin: 50% 100%;
}

.menubar {  
    transform: rotateX(-90deg);
    transition: transform 0.5s;
    transform-origin: 50% 0%;
}

1. 单击翻转按钮
2. 点击菜单，下拉菜单中的子菜单在表单元素下方

Answer 1

您需要将 z-index 添加到父级：

.wrapper.flip { z-index: 2;}