Zum Beispiel, wenn 2 Divs absolut positioniert sind, kann man das erste Div auf die Sekunde setzen, indem man den ersten Z-Index höher als den zweiten setzt. Können wir ein solches Verhalten mit translateZ() oder translate3d erreichen?Kann css3 translateZ() anstelle von z-index verwendet werden?
Die Antwort jetzt, 3 Jahre nach, ist, dass Sie können. Sie müssen transform-style: preserve-3d; auf dem übergeordneten, but it's possible verwenden.
.container {
transform-style: preserve-3d;
}
.test1 {
width: 500px;
height: 500px;
background: red;
transform: translate3d(0, 0, 1px);
}
.test2 {
width: 500px;
height: 500px;
background: green;
left: 250px;
top: 250px;
position: absolute;
transform: translate3d(0, 0, 0);
}<div class="container">
<div class="test1">
test
</div>
<div class="test2">
test #2
</div>
</div>Danke, diese Antwort wurde als akzeptiert markiert. Es ist erwähnenswert, dass beide envolved-Elemente die 'transform'-Eigenschaft haben sollten. – mumu2
Hey. Können Sie sich [this] (https://plnr.r.co/KT6raJ3rBgq8aO1y8Xlk) ansehen? Die Schaltfläche ist ausgeblendet, obwohl sie einen größeren Übersetzungs-z-Wert aufweist. Vielen Dank. – user1203349
Hm. Ich bekomme ein großes rotes Quadrat in Chrome 58 und Safari 10.1. –
Kurze Antwort: No. View demo, die als Zeit arbeitet
der EntsendungLange Antwort: Es ist nicht zu sollte, aber manchmal, wenn beispielsweise ein Element hat eine Transformation, wenn tut sein Geschwister einiger Browser don't handle the situation well, was in dem z-Index nicht, ignoriert werden.
Im Allgemeinen ist dies jedoch, weil die transform selbst angewendet wird, nicht wegen der translateZ. Die Lösung in so einem Fall gibt es alle relevanten Elemente transform: translate3d(0px, 0px, 0px) oder etwas Ähnliches, das den Browser macht, die Elemente sorgfältiger rendern
Warum versuchen Sie es nicht und finden Sie heraus? – cimmanon