Wie platziere ich ein untergeordnetes Element hinter seinem übergeordneten Element, ohne den Z-Index zu verwenden?

 Hintergrund: rot;<br> Breite: 100px;<br> Höhe: 100px; <br> Transformationsstil: Preserve-3D;<br> Position: relative;<br>}</p><p>.child {<br> Hintergrund: blau;<br> Breite: 100px;<br> Höhe: 100px;<br> Position: absolut;<br> oben: -5px ;<br> links: -5px;<br> transformieren: translatorZ(-10px)<br>}

 Parent<br> <div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Child

In diesem Beispiel:

1. Die Das übergeordnete Div verfügt über die Eigenschaft „transform-style: retain-3d“, die 3D-Transformationen für das Element und seine untergeordneten Elemente ermöglicht.
2. Das untergeordnete Div ist absolut innerhalb des übergeordneten Elements positioniert.
3. Die Transformation: TranslateZ (-10px)-Eigenschaft des untergeordneten Elements verschiebt es um 10 Pixel entlang der Z-Achse nach hinten.

Dadurch wird das untergeordnete Element dahinter angezeigt das übergeordnete Element und überlagert es, ohne seine Sicht zu verdecken. Diese Technik funktioniert in allen modernen Browsern.

Das obige ist der detaillierte Inhalt vonWie platziere ich ein untergeordnetes Element hinter seinem übergeordneten Element, ohne den Z-Index zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!