引導程序下拉菜單上的z索引不適用於轉換

Question

我已經嘗試過使用帶有轉換的bootstrap下拉菜單的翻轉菜單。 翻轉功能正常，但是即使下拉菜單中存在z-index，下拉菜單仍在表單元素下方呈現。

閱讀后，我了解了使用轉換時的堆棧上下文問題，但無法找出解決方案。

該代碼位於此處的代碼鏈接中 。 由於以下代碼，Z索引不適用。

.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;}