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

So positionieren Sie ein untergeordnetes Element hinter dem übergeordneten Element ohne Z-Index

Die Frage

In einigen Szenarien muss möglicherweise ein untergeordnetes Element unten angezeigt werden (oder hinter) seinem übergeordneten Element, unabhängig von ihrer Position im DOM-Baum. Allerdings scheint das Festlegen von z-index und position: relative diesen Effekt nicht zu erzielen.

Die Lösung

Dank der Fortschritte in CSS können Sie dies jetzt mithilfe von CSS-3D-Transformationen erreichen. So geht's:

 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

Nach dem Login kopieren

< /pre>

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!