Mengapakah div1 Tidak Muncul Di Atas div2 Walaupun Indeks z Lebih Tinggi?

Meletakkan Div Di Atas Div Lain Menggunakan z-index

Dalam pembangunan web, anda mungkin menghadapi situasi di mana anda perlu melapis div di atas satu sama lain untuk mencapai yang diingini kesan visual. Walau bagaimanapun, anda mungkin mendapati bahawa menggunakan indeks-z tidak selalu menghasilkan hasil yang diharapkan.

Satu isu biasa ialah apabila div1 enggan muncul di atas div2 walaupun memberikan nilai indeks z yang lebih tinggi. Sebab di sebalik ini mungkin kekurangan konteks tindanan yang betul.

Untuk mewujudkan konteks tindanan, anda harus menambah kedudukan sifat CSS: relatif kepada kedua-dua div. Ini mewujudkan konteks tindanan baharu yang mana nilai indeks-z boleh berfungsi seperti yang dimaksudkan.

Berikut ialah versi kod anda yang dikemas kini:

<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>

Dengan pengubahsuaian ini, div1 kini sepatutnya muncul dengan betul di atas div2. Ingat, indeks-z hanya mempengaruhi susunan tindanan dalam konteks tindanan yang sama.

Atas ialah kandungan terperinci Mengapakah div1 Tidak Muncul Di Atas div2 Walaupun Indeks z Lebih Tinggi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!