Wie kann CSS die Stapelreihenfolge von 3D-Geschwisterelementen umkehren?

So erreichen Sie die Umkehrung der Stapelreihenfolge von Geschwisterelementen mithilfe von CSS und Transform 3D

Wenn Sie das Problem verstehen, möchten Sie sicherstellen, dass ein untergeordnetes Element konsistent ist erscheint hinter seinem übergeordneten Element, unabhängig von seiner Position im DOM-Baum. Auch wenn die Z-Indizierung wie eine geeignete Lösung erscheint, erweist sie sich in solchen Szenarien oft als unwirksam.

Um dieser Herausforderung zu begegnen und die gewünschte Umkehrung der Stapelreihenfolge zu erreichen, bieten moderne Browser jetzt eine leistungsstarke Technik an, die 3D-Transformation nutzt und CSS.

Beachten Sie das folgende CSS Snippet:

.parent {
    background: red;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    position: relative;
}

.child {
    background: blue;
    width: 100px;
    height: 100px;
    position: absolute;
    top: -5px;
    left: -5px;
    transform: translateZ(-10px);
}

In diesem Beispiel wird dem übergeordneten Element ein roter Hintergrund und Abmessungen von 100 x 100 Pixel zugewiesen. Es ist relativ positioniert und nutzt die Eigenschaft transform-style: Preserve-3D, um einen 3D-Stapelkontext zu erstellen.

Das untergeordnete Element erhält dagegen einen blauen Hintergrund und die gleichen Abmessungen. Es ist absolut innerhalb des übergeordneten Elements positioniert, mit leicht negativen Versätzen oben und links. Entscheidend ist, dass ihm die Eigenschaft „transform: translatorZ(-10px)“ zugewiesen wird, die ihn im 3D-Raum, der durch die Eigenschaft „transform-style“ des übergeordneten Elements erstellt wurde, entlang der Z-Achse um 10 Pixel nach hinten verschiebt.

Als Ergebnis, trotz seiner An seiner Position im DOM-Baum erscheint das untergeordnete Element aufgrund seiner negativen Verschiebung auf der Z-Achse effektiv hinter seinem übergeordneten Element. Diese Technik kehrt die Stapelreihenfolge effektiv um und stellt sicher, dass das Kind jederzeit hinter dem Elternteil bleibt.

Das obige ist der detaillierte Inhalt vonWie kann CSS die Stapelreihenfolge von 3D-Geschwisterelementen umkehren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!