css - 引导下拉菜单上的 z-index 不适用于转换

Question

我已经尝试过使用转换的引导下拉菜单的翻转菜单。翻转工作正常，但下拉菜单呈现在表单元素下方，即使下拉菜单存在 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;}