Bagaimanakah Saya Boleh Membuat Elemen Induk Muncul Di Atas Elemen Anaknya Walaupun Indeks Z Lebih Tinggi?

Letakkan Elemen Bersarang dalam Paksi-Z

Dalam reka bentuk web, adalah perkara biasa untuk mempunyai elemen bersarang antara satu sama lain. Walau bagaimanapun, apabila ia berkaitan dengan kedudukan dalam paksi-z, mencapai kesan yang diingini boleh menjadi sukar. Soalan ini meneroka senario di mana elemen induk perlu muncul di atas elemen anaknya walaupun mempunyai nilai indeks z yang lebih tinggi.

Isu ini timbul kerana menetapkan indeks z negatif untuk kanak-kanak menyebabkan ia jatuh di bawah mengandungi unsur, mengakibatkan penempatan yang tidak diingini. Untuk menyelesaikan masalah ini, jawapannya mencadangkan mengalih keluar indeks-z daripada elemen induk dan memberikan indeks-z negatif kepada kanak-kanak itu. Ini memastikan elemen induk kekal di atas dalam paksi z tanpa mengorbankan kedudukan bekas halaman.

Berikut ialah contoh yang diubah suai untuk menunjukkan penyelesaian:

.parent {
  position: relative;
  width: 350px;
  height: 150px;
  background: red;
  border: solid 1px #000;
}

.child {
  position: relative;
  background-color: blue;
  height: 200px;
  z-index: -10;
}

.wrapper {
  position: relative;
  background: green;
  height: 350px;
}

<div class="wrapper">
  <div class="parent">parent 1 parent 1
    <div class="child">child child child</div>
  </div>
  ...
</div>

Dengan CSS yang dikemas kini ini, elemen induk akan kekal di atas kanak-kanak itu, walaupun ia tidak mempunyai sifat indeks-z. Kanak-kanak diletakkan di bawah ibu bapa kerana indeks z negatifnya, memastikan kesan pertindihan yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Elemen Induk Muncul Di Atas Elemen Anaknya Walaupun Indeks Z Lebih Tinggi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!