Mengapa Z-Index Tidak Berfungsi Seperti Yang Dijangkakan dengan Kedudukan Tetap?

z-index Tidak Berfungsi dengan Kedudukan Tetap

Dalam susun atur halaman, z-index menentukan susunan susunan elemen pada halaman web, dengan nilai yang lebih tinggi muncul di atas. Walau bagaimanapun, apabila sesuatu elemen diletakkan tetap, nampaknya bertentangan dengan gerak hati, ia boleh menjadi sukar untuk meletakkannya di belakang elemen kedudukan statik menggunakan indeks-z.

Contoh

Pertimbangkan kod HTML dan CSS berikut:

<div>

#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 terbukti dalam contoh, walaupun lebih tinggi nilai indeks-z diberikan kepada #over, elemen kedudukan tetap #under kekal di atas.

Penjelasan

Tingkah laku mengelirukan timbul daripada perbezaan yang wujud antara statik dan tetap kedudukan.

• Kedudukan statik meninggalkan unsur-unsur tidak terjejas oleh indeks-z, kerana ia terletak pada nilai biasa aliran dokumen.
• Kedudukan tetap, sebaliknya, mengalih keluar elemen daripada aliran biasa dan meletakkannya berbanding dengan port pandangan (skrin pengguna).

Dalam konteks ini , indeks-z hanya menentukan susunan susunan elemen tetap berbanding tetap yang lain elemen.

Penyelesaian

Untuk membetulkan isu ini, tambahkan kedudukan: berbanding dengan elemen kedudukan statik. Ini mencipta konteks tindanan baharu untuk #over, membenarkan z-index menentukan kedudukannya berbanding konteks yang baru dibuat:

#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;
}

Atas ialah kandungan terperinci Mengapa Z-Index Tidak Berfungsi Seperti Yang Dijangkakan dengan Kedudukan Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!