使用變換堆疊絕對元素

Question

我目前正在用自定義絕對定位下拉菜單構建表單。其他輸入字段使用transform: translateY進行動畫。不過，我根本無法讓下拉列表堆疊在下面的輸入元素之上。我已經簡化我的問題如下：

HTML：

<div class="a"></div> 
<div class="a top"> 
    <div class="b"></div> 
</div> 
<div class="a"></div> 

CSS：

.a { 
    transform: translateY(10px); 
    position: "relative"; 
    background: red; 
    height: 50px; 
    margin-top: 10px; 
    z-index: 1; 
    opacity: 0.8; 
} 
.b { 
    position: "absolute"; 
    top: 0; 
    height: 100px; 
    width:25px; 
    background: blue; 
} 
.input.top { 
    z-index: 10; 
} 

下小提琴說明我的問題： https://jsfiddle.net/m817ffqy/1/

我已經實驗過transform-style: flat和設置translateZ，但我一直沒有得到想要的效果。

Answer 1

相反的：

position: "relative"; 
position: "absolute"; 

嘗試：

position: relative; 
position: absolute; 

此外，.input.top將需要或者position: relative或position: absolute。