Bagaimana untuk Membetulkan Isu Pertindihan Div dengan z-index?

Menyelesaikan Pertindihan Div Menggunakan z-index

Dalam senario tertentu, anda mungkin menghadapi masalah dengan div yang bertindih walaupun semasa menggunakan sifat z-index . Untuk memastikan kesan lapisan yang diingini, adalah penting untuk memahami penggunaan z-index yang betul dan pertimbangkan untuk menggunakan sifat CSS tambahan untuk mencipta konteks tindanan.

Dalam contoh yang diberikan, gelagat yang dimaksudkan adalah untuk div1 muncul di atas div2. Walau bagaimanapun, hanya memberikan nilai indeks-z yang lebih tinggi kepada div1 mungkin tidak selalu menghasilkan hasil yang diharapkan. Untuk menangani ini, anda harus menambah kedudukan: sifat relatif kepada kedua-dua div. Ini mewujudkan konteks tindanan dalam elemen, membenarkan z-index berkuat kuasa dengan betul.

Kod yang diubah suai di bawah menggabungkan pembetulan ini:

<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 menambahkan kedudukan: relatif kepada kedua-dua div, kami mencipta konteks susun khusus untuk elemen ini. Ini memastikan bahawa nilai indeks z yang lebih tinggi yang diberikan kepada div1 dihormati, menyebabkan div1 dipaparkan di atas div2 seperti yang dimaksudkan.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan Isu Pertindihan Div dengan z-index?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!