変換による絶対要素の積み重ね

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のいずれかが必要になります。