Mengapa Elemen Kedudukan Tetap Saya Muncul di Hadapan Elemen Kedudukan Statik dengan indeks z yang lebih tinggi?

Isu indeks-z Selesai: Memahami Kedudukan Tetap

Walaupun menetapkan indeks-z, kadangkala sukar untuk membuat elemen kedudukan tetap muncul di belakang kedudukan statik. Penyelesaian biasa melibatkan penggunaan kedudukan mutlak pada elemen statik.

Untuk menyelidiki dengan lebih mendalam kelakuan ini, pertimbangkan contoh berikut:

<div>
<pre class="brush:php;toolbar:false">#over {
  width: 600px;
  z-index: 10;
}

#under {
  position: fixed;
  top: 5px;
  width: 420px;
  left: 20px;
  z-index: 1;
}

Seperti yang anda akan perhatikan, tetapan elemen (dengan indeks-z 1) kekal di hadapan elemen statik (dengan indeks-z 10). Ini berlaku kerana secara lalai, elemen kedudukan statik tidak mempunyai konteks tindanan, bermakna ia tidak terjejas oleh indeks-z.

Untuk menyelesaikannya, anda boleh mentakrifkan konteks tindanan untuk unsur statik dengan menambahkan kedudukan: berbanding dengannya . Ini mencipta lapisan indeks-z baharu di mana sifat indeks-z berfungsi seperti yang diharapkan.

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

Kini, elemen tetap akan muncul di belakang elemen statik, seperti yang dimaksudkan. Pelarasan mudah ini memastikan tingkah laku indeks z yang betul, membolehkan anda mengawal lapisan elemen dengan berkesan.