Bagaimana Meletakkan Elemen Kanak-Kanak Di Belakang Induknya Tanpa Menggunakan Z-index?

Cara Meletakkan Elemen Anak di Belakang Ibu Bapa tanpa Z-Index

Persoalannya

Dalam sesetengah senario, anda mungkin memerlukan elemen anak untuk dipaparkan di bawah (atau di belakang) induknya, tanpa mengira kedudukan mereka dalam pepohon DOM. Walau bagaimanapun, menetapkan indeks-z dan kedudukan: relatif nampaknya tidak mencapai kesan ini.

Penyelesaian

Terima kasih kepada kemajuan dalam CSS, anda kini boleh mencapai ini menggunakan transformasi 3D CSS. Begini caranya:

 latar belakang: merah;<br> lebar: 100px;<br> tinggi: 100px; <br> gaya ubah: preserve-3d;<br> kedudukan: relatif;<br>}</p><p>.kanak-kanak {<br> latar belakang: biru;<br> lebar: 100px;<br> tinggi: 100px;<br> kedudukan: mutlak;<br> atas: -5px ;<br> kiri: -5px;<br> ubah: translateZ(-10px)<br>}

 Ibu bapa<br> <div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">Child

Salin selepas log masuk

< /pre>

Dalam hal ini contoh:

1. Div induk mempunyai sifat transform-style: preserve-3d, yang membolehkan transformasi 3D untuk elemen dan anak-anaknya.
2. Div anak diposisikan secara mutlak dalam ibu bapa.
3. Transformasi: translateZ(-10px) sifat pada anak mengalihkannya 10 piksel ke belakang sepanjang paksi-z.

Akibatnya, elemen anak akan muncul di belakang induk, menindihnya tanpa mengaburkan pandangannya. Teknik ini berfungsi dalam semua penyemak imbas moden.

Atas ialah kandungan terperinci Bagaimana Meletakkan Elemen Kanak-Kanak Di Belakang Induknya Tanpa Menggunakan Z-index?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!