Bagaimana untuk Meletakkan Elemen Induk Di Atas Anaknya Menggunakan CSS Z-index?

Mencapai Elemen Ibu Bapa Di Atas Anak

Apabila menemui elemen CSS bersarang, mungkin terdapat keperluan untuk memaparkan elemen induk di atas elemen anak dalam paksi z. Walaupun menetapkan indeks-z pada kedua-dua elemen sahaja mungkin tidak mencukupi, terdapat penyelesaian yang berkesan:

Indeks Z Negatif untuk Kanak-kanak

Alih keluar indeks-z harta daripada elemen induk dan tetapkan nilai indeks z negatif kepada elemen anak. Ini akan meletakkan elemen anak di belakang elemen induk, pada asasnya membawa induk ke latar depan.

Pertimbangkan kod berikut:

.parent {
  position: relative;
}
.child {
  position: absolute;
  background-color: blue;
  z-index: -1;
}

Dalam senario ini, elemen induk mempunyai kedudukan yang meletakkannya pada aliran biasa halaman, manakala kedudukan elemen anak adalah relatif kepada induk. Indeks z negatif yang diberikan kepada elemen anak memastikan ia muncul di belakang elemen induk.

Dengan menggunakan teknik ini, anda boleh mencapai susunan yang diingini dengan berkesan untuk meletakkan elemen induk di atas elemen anak dalam paksi-z, tanpa menjejaskan kedudukan elemen lain dalam halaman.

Atas ialah kandungan terperinci Bagaimana untuk Meletakkan Elemen Induk Di Atas Anaknya Menggunakan CSS Z-index?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!