Mengapa indeks-z Tidak Mempengaruhi Elemen Kedudukan Tetap?

Elemen dengan Kedudukan Tetap Tidak Terjejas oleh z-index

Dalam CSS, sifat z-index mengawal susunan susunan elemen pada halaman, di mana nilai yang lebih tinggi menggerakkan elemen ke hadapan. Walau bagaimanapun, kadangkala elemen kedudukan tetap kelihatan kebal terhadap perubahan indeks z.

Tingkah laku ini disebabkan oleh kedudukan statik lalai unsur tetap. Apabila elemen dengan kedudukan tetap diletakkan dalam elemen lain dengan kedudukan lalai, ia mewujudkan konteks tindanan dalam elemen tersebut. Dalam konteks ini, elemen tetap dilapisi di atas mana-mana elemen lain, tanpa mengira indeks-znya.

Untuk menyelesaikan isu ini, anda boleh menambah kedudukan relatif pada elemen induk. Ini mewujudkan konteks tindanan baharu dalam induk, membenarkan indeks-z elemen tetap berkuat kuasa.

Contoh:

Pertimbangkan HTML dan CSS berikut:

<div>
<pre class="brush:php;toolbar:false">#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;
}

Dalam kes ini, elemen #under akan kekal di atas elemen #over, walaupun elemen yang terakhir mempunyai indeks z yang lebih tinggi. Untuk membetulkannya, tambahkan kedudukan relatif pada elemen #over:

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

Sekarang, indeks-z bagi elemen #under akan berfungsi seperti yang diharapkan, meletakkannya di belakang elemen #over.