使用变换堆叠绝对元素

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。