Mengapa Kedudukan Tetap Memecahkan Pesanan Indeks Z?

Fahami Paradoks Indeks-Z dengan Kedudukan Tetap

Apabila berurusan dengan elemen HTML, sifat z-index mengawal susunan susunan, menentukan elemen yang manakah muncul di atas atau di bawah yang lain pada halaman. Walau bagaimanapun, gelagat yang tidak dijangka berlaku apabila menggunakan indeks-z dengan kedudukan elemen tetap dan statik.

Pertimbangkan coretan kod berikut:

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

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

Anda menjangkakan elemen dengan #over akan dipaparkan di belakang #under kerana ia mempunyai nilai indeks-z yang lebih tinggi. Walau bagaimanapun, elemen tetap (#under) akan menindih #over secara degil, mengabaikan keutamaan yang sepatutnya lebih rendah.

Ini kerana kedudukan tetap mengalih keluar elemen daripada aliran dokumen biasa. Ia meletakkan elemen berdasarkan port pandang, pada asasnya mencipta lapisan berasingan di atas. Akibatnya, indeks z unsur tetap tidak berinteraksi dengan indeks z unsur tidak tetap.

Untuk membetulkan isu ini dan membenarkan #over muncul di belakang #under, tambah posisi: relative ; to #over:

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

Pelarasan kecil ini mewujudkan konteks tindanan tempatan baharu dalam #over, membolehkan indeks-znya mempengaruhi elemen dalam konteks tersebut. Kini, #under akan dipaparkan dengan betul di belakang #over, mengikut susunan susunan yang dimaksudkan.

Ingat, kedudukan tetap ialah alat yang berkuasa untuk mencipta kedudukan mutlak pada halaman, tetapi ia disertakan dengan pengehadan apabila berinteraksi dengan z-index dalam senario tertentu. Dengan menggunakan kedudukan: helah relatif, anda boleh mendapatkan semula kawalan ke atas susunan susun dan mencapai kesan lapisan yang anda inginkan.

Atas ialah kandungan terperinci Mengapa Kedudukan Tetap Memecahkan Pesanan Indeks Z?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!