-1
私は現在、カスタムの絶対配置されたドロップダウンでフォームを構築しています。その他の入力フィールドは、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
としましたが、希望の効果を得ることができませんでした。
構文に間違いはありませんが、デモに違いはありません。また、HTMLに '.input'クラスがないため、' .input.top'は動作しません。さらに、すべての要素はすでに「相対」または「絶対」です。 –