Mengapa z-index Tidak Berfungsi dengan Elemen Kedudukan Tetap?

z-index Tidak Berfungsi dengan Kedudukan Tetap: Membongkar Sebab

Kedudukan tetap ialah alat yang berkuasa untuk mencipta elemen yang kekal pada tempatnya pada skrin tanpa mengira menatal. Walau bagaimanapun, ia kadangkala boleh mengganggu sifat z-index, yang mengawal susunan susunan elemen.

Untuk menggambarkan, pertimbangkan coretan kod berikut:

#over {
  width: 600px;
  z-index: 10;
}

#under {
  position: fixed;
  top: 5px;
  width: 420px;
  left: 20px;
  border: 1px solid;
  height: 10%;
  background: #fff;
  z-index: 1;
}

Seperti yang anda jangkakan, elemen #over sepatutnya muncul di atas elemen #under kerana ia mempunyai indeks-z yang lebih tinggi. Walau bagaimanapun, dalam senario ini, #under masih menindih #over. Mengapa ini berlaku?

Jawapannya terletak pada kedudukan lalai #over. Secara lalai, elemen mempunyai kedudukan statik, yang bermaksud ia menduduki kedudukan semula jadinya dalam aliran dokumen. Elemen kedudukan tetap, sebaliknya, dialih keluar daripada aliran biasa dan diletakkan pada koordinat tertentu berbanding dengan port pandangan halaman.

Dalam kes ini, kedudukan tetap #under membawanya keluar daripada aliran biasa , dan oleh itu, indeks-znya menjadi tidak relevan kepada elemen dengan kedudukan statik. Untuk menjadikan #under muncul di belakang #over, kita perlu menetapkan kedudukan #over kepada relatif. Ini akan meletakkan #over dalam aliran dokumen tetapi membenarkan ia mengalihkan kedudukannya mengikut indeks-z yang ditentukan.

Berikut ialah coretan kod tetap:

#over {
  width: 600px;
  z-index: 10;
  position: relative;
}

#under {
  position: fixed;
  top: 14px;
  width: 415px;
  left: 53px;
  border: 1px solid;
  height: 10%;
  background: #f0f;
  z-index: 1;
}

Sekarang, #under elemen muncul di bawah #over seperti yang dijangkakan. Ingat, untuk indeks-z berfungsi dengan betul, elemen mestilah sama ada secara mutlak atau relatif.

Atas ialah kandungan terperinci Mengapa z-index Tidak Berfungsi dengan Elemen Kedudukan Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!