Warum unterbricht „translate3d' die Z-Index-Reihenfolge bei überlappenden absolut positionierten Elementen?

Z-Index-Anomalien mit Webkit Transform Translate3d

In einem Szenario, in dem sich zwei absolut positionierte div-Elemente mit angegebenen Z-Indexwerten überlappen, gilt dies Eine Translate3D-Webkit-Transformation, um sie vom Bildschirm weg und wieder auf den Bildschirm zu animieren, kann ihren Z-Index stören Reihenfolge.

Erklärung

Bei Verwendung von Translate3d gelangen die Elemente in eine dreidimensionale Renderebene, in der der Z-Index keine Rolle mehr spielt. Die Transformation verschiebt die Elemente entlang der Z-Achse und bricht die traditionelle 2D-Stapelreihenfolge.

Lösung

So stellen Sie die Z-Index-Reihenfolge wieder her:

1. Wechseln Sie zurück zum 2D-Rendering für untergeordnete Elemente, indem Sie transform-style: flat; festlegen. Dies zwingt die Elemente dazu, sich so zu verhalten, als ob sie sich in einem flachen 2D-Raum befänden.

element.css({ 'transform-style': 'flat' });

Zusätzliche Hinweise

• Das Problem könnte damit zusammenhängen zum Webkit-Bug #61824.
• Die Lösung funktioniert für iPhone/iPad und Android-Browser, die Webkit unterstützen Übergänge.
• Das Festlegen des dritten Parameters von translator3d auf andere Werte behebt nicht das Problem der Stapelreihenfolge im 3D-Raum.

Das obige ist der detaillierte Inhalt vonWarum unterbricht „translate3d' die Z-Index-Reihenfolge bei überlappenden absolut positionierten Elementen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!