Ich baue gerade ein Formular mit einem benutzerdefinierten absolut positionierten Dropdown. Die anderen Eingabefelder werden mit transform: translateY
animiert. Allerdings kann ich das Dropdown-Menü einfach nicht auf die folgenden Eingabeelemente stapeln. Ich habe mein Problem folgendes vereinfacht:Absolute Elemente mit Transformation stapeln
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;
}
Die folgende Geige zeigt mein Problem: mit https://jsfiddle.net/m817ffqy/1/
Ich experimentierte habe transform-style: flat
und Einstellung translateZ
, aber ich war nicht in der Lage, den gewünschten Effekt zu erhalten ..
Obwohl Sie mit der Syntax korrekt sind, scheint es keinen Unterschied in der Demo zu machen. Außerdem funktioniert '.input.top' nicht, weil es keine' .input' Klasse im HTML gibt. Außerdem sind alle Elemente bereits "relativ" oder "absolut". –