Mengapakah `translate3d` Memecahkan Susunan Indeks-Z dalam Bertindih Elemen Kedudukan Benar?

Anomali Indeks Z dengan Webkit Transform Translate3d

Dalam senario di mana dua elemen div yang diposisikan secara mutlak dengan nilai indeks z yang ditentukan bertindih, menggunakan transformasi webkit translate3d untuk menghidupkannya dan kembali ke skrin boleh mengganggu indeks-z mereka pesanan.

Penjelasan

Apabila menggunakan translate3d, unsur-unsur memasuki satah pemaparan tiga dimensi, dengan indeks-z menjadi tidak relevan. Transformasi menggerakkan elemen di sepanjang paksi z, memecahkan susunan susunan 2D tradisional.

Penyelesaian

Untuk memulihkan susunan indeks-z:

1. Tukar kembali kepada pemaparan 2D untuk elemen kanak-kanak dengan menetapkan gaya transformasi: rata;. Ini memaksa elemen untuk berkelakuan seolah-olah berada dalam ruang 2D yang rata.

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

Nota Tambahan

• Isu ini mungkin berkaitan kepada pepijat Webkit #61824.
• Penyelesaian berfungsi untuk penyemak imbas iPhone/iPad dan Android yang menyokong Webkit peralihan.
• Menetapkan parameter ketiga translate3d kepada nilai yang berbeza tidak menangani isu susunan tindanan dalam ruang 3D.

Atas ialah kandungan terperinci Mengapakah `translate3d` Memecahkan Susunan Indeks-Z dalam Bertindih Elemen Kedudukan Benar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!