Bagaimanakah CSS Boleh Mengubah Susunan Susunan Elemen Saudara Terbalik 3D?

Cara Mencapai Pembalikan Pesanan Susunan Elemen Adik Beradik Menggunakan CSS dan Transform 3D

Memahami isu ini, anda berhasrat untuk memastikan elemen kanak-kanak secara konsisten muncul di belakang induknya tanpa mengira kedudukannya dalam pepohon DOM. Walaupun pengindeksan z mungkin kelihatan seperti penyelesaian yang sesuai, ia sering terbukti tidak berkesan dalam senario sedemikian.

Untuk menangani cabaran ini dan mencapai pembalikan susunan susunan yang diingini, penyemak imbas moden kini menawarkan teknik berkuasa menggunakan transformasi 3D dan CSS.

Pertimbangkan CSS di bawah coretan:

.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);
}

Dalam contoh ini, elemen induk diberikan latar belakang merah dan dimensi 100px kali 100px. Ia diletakkan secara relatif dan menggunakan sifat transform-style: preserve-3d untuk mencipta konteks tindanan 3D.

Elemen kanak-kanak, sebaliknya, diberikan latar belakang biru dan dimensi yang sama. Ia diposisikan sepenuhnya dalam induk, dengan bahagian atas negatif sedikit dan offset kiri. Yang penting, ia diberikan sifat transformasi: translateZ(-10px), yang mengalihkannya 10px ke belakang sepanjang paksi-z dalam ruang 3D yang dicipta oleh sifat gaya transformasi ibu bapa.

Akibatnya, walaupun ia kedudukan dalam pepohon DOM, elemen anak muncul dengan berkesan di belakang induknya kerana terjemahan negatifnya pada paksi z. Teknik ini membalikkan susunan susun secara berkesan, memastikan anak berada di belakang ibu bapa pada setiap masa.

Atas ialah kandungan terperinci Bagaimanakah CSS Boleh Mengubah Susunan Susunan Elemen Saudara Terbalik 3D?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!