Bagaimana untuk Membuat Elemen Induk Muncul Di Atas Anaknya dalam CSS?

Cara Menaikkan Elemen Induk Di Atas Anak dalam Paksi-Z

Dalam CSS, mencapai susunan susunan elemen bersarang yang diingini boleh menjadi mencabar. Soalan ini menangani senario di mana unsur anak muncul di atas elemen induknya dalam paksi z dan menetapkan indeks z sahaja tidak mencukupi.

Untuk menangani perkara ini, penyelesaiannya melibatkan penetapan nilai indeks z negatif untuk elemen kanak-kanak. Sebaliknya, sebarang tetapan indeks-z pada elemen induk harus dialih keluar. Ini secara berkesan akan menaikkan elemen induk di atas anak dalam paksi z sambil mengekalkan kedudukan elemen yang diingini dalam struktur dokumen.

Pertimbangkan contoh kod berikut:

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

.child {
  position: relative;
  background-color: blue;
  height: 200px;
  z-index: -1;  // Negative z-index applied to the child element
}

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

Dengan pengubahsuaian ini, elemen induk kini akan muncul di atas elemen anak dalam paksi z, dengan berkesan menyelesaikan isu yang diterangkan dalam soalan asal.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Elemen Induk Muncul Di Atas Anaknya dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!