Apabila Indeks Z Gagal: Cara Meletakkan Satu Div Di Atas Yang Lain

Menggunakan indeks-z untuk Meletakkan Satu Div Di Atas Yang Lain

Untuk memastikan div tertentu kekal di atas yang lain, memanfaatkan sifat indeks-z mungkin tidak selalu mencukupi. Untuk membetulkan perkara ini, pertimbangkan untuk melaksanakan peningkatan berikut:

1. Wujudkan Konteks Kedudukan:
Tetapkan kedudukan: relatif kepada kedua-dua div untuk mencipta konteks tindanan. Ini memastikan bahawa setiap kedudukan div dinilai dalam konteksnya sendiri, membolehkan indeks-z berkuat kuasa.

2. Tetapkan Nilai indeks-z:
Tetapkan nilai indeks-z yang berbeza kepada div untuk menetapkan susunan susunan menegaknya. Nilai indeks-z yang lebih tinggi menunjukkan elemen yang diletakkan lebih dekat dengan latar depan.

3. Laraskan Sifat Kedudukan Lain:
Ubah suai atribut kedudukan lain seperti yang diperlukan, seperti atas, bawah, jidar atas, dll., untuk memperhalusi lagi kedudukan relatif div.

Berikut ialah coretan kod yang dikemas kini yang mempamerkan teknik yang dinyatakan di atas:

<code class="css">div {
  width: 100px;
  height: 100px;
}

.div1 {
  background: red;
  z-index: 2;
  position: relative;
}

.div2 {
  background: blue;
  margin-top: -15vh;
  z-index: 1;
  position: relative;
}</code>

<code class="html"><div class="div1"></div>
<div class="div2"></div></code>

Dengan melaksanakan peningkatan ini, anda boleh meletakkan satu div dengan berkesan di atas yang lain, memastikan ia kekal dalam hierarki visual yang dikehendaki.

Atas ialah kandungan terperinci Apabila Indeks Z Gagal: Cara Meletakkan Satu Div Di Atas Yang Lain. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!