Bagaimanakah Saya Boleh Melapisi Elemen Ibu Bapa dan Anak Dengan Betul Menggunakan Indeks Z dalam CSS?

Memisahkan Elemen Ibu Bapa dan Anak dalam Indeks Z

Dalam CSS, sifat z-index mengawal lapisan elemen pada halaman web . Walau bagaimanapun, kadangkala elemen induk mungkin muncul di belakang elemen anaknya walaupun mempunyai indeks z yang lebih tinggi disebabkan oleh cara CSS mengendalikan konteks tindanan.

Untuk menyelesaikan isu ini, tidak semestinya perlu menggunakan indeks z negatif. pada elemen kanak-kanak. Sebaliknya, pertimbangkan penyelesaian berikut:

Alih Keluar Indeks Z Ibu Bapa dan Tukar Indeks Z Anak:

Daripada menetapkan indeks-z pada induk, alih keluarnya dan tetapkan indeks z negatif pada kanak-kanak itu. Ini memastikan elemen anak kekal di bawah induk tanpa menolaknya keluar dari bekas halaman.

Berikut ialah kod CSS yang disemak:

.parent {
  position: relative;
  width: 350px;
  height: 150px;
  background: red;
  border: solid 1px #000;
}
.child {
  position: relative;
  background-color: blue;
  height: 200px;
  z-index: -1;
}

Pastikan Kedudukan Relatif:

Kedua-dua elemen ibu bapa dan anak harus menetapkan sifat kedudukan mereka kepada relatif atau mutlak untuk membolehkan yang betul lapisan.

Contoh HTML:

<div class="wrapper">
  <div class="parent">parent 1 parent 1
    <div class="child">child child child</div>
  </div>
  <div class="parent2">parent 2 parent 2</div>
</div>

Penyelesaian ini meletakkan elemen induk di atas anaknya tanpa mengganggu reka letak keseluruhan halaman atau menyebabkan kelakuan yang tidak dijangka.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melapisi Elemen Ibu Bapa dan Anak Dengan Betul Menggunakan Indeks Z dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!