引导程序下拉菜单上的z索引不适用于转换

Question

我已经尝试过使用带有transform的bootstrap下拉菜单的翻转菜单。翻转效果很好，但是即使下拉菜单中存在z-index，下拉菜单仍在表单元素下方呈现。

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

可在此处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;}