Bagaimanakah `kedudukan:relatif` Memberi Impak Indeks Z dan Susunan Susunan Elemen dalam CSS?

Mengapa Atribut "position:relative" Mengubah Gelagat Indeks Z

Dalam HTML dan CSS, sifat "position:relative" sering digunakan untuk meletakkan elemen dalam bekas mereka. Walau bagaimanapun, dalam senario tertentu, ia boleh kelihatan seolah-olah sifat ini turut mempengaruhi indeks-z, walaupun ia tidak dinyatakan secara eksplisit.

Untuk memahami tingkah laku ini, anda perlu menyelidiki susunan lukisan CSS. Menurut spesifikasi CSS, elemen dilukis dalam urutan berikut:

1. Aliran biasa: Elemen dilukis mengikut susunan yang muncul dalam dokumen HTML.
2. Terapung: Elemen terapung dicat mengikut susunan pokok selepas biasa aliran.
3. Elemen diposisikan: Elemen dengan nilai kedudukan selain daripada "statik" dicat dalam susunan pokok selepas terapung.
4. Blok tidak berposisi aliran masuk elemen: Elemen ini dicat mengikut susunan pokok selepas elemen diletakkan.
5. Sama sekali elemen diposisikan: Elemen dengan kedudukan "mutlak" dicat dalam susunan pokok selepas aliran biasa, terapung dan elemen diposisikan.

Secara lalai, elemen tanpa sebarang kedudukan eksplisit ditentukan (seperti " position:static" atau "position:absolute") dianggap "in-flow" dan akan dicat semasa langkah 4. Walau bagaimanapun, jika bekas induk elemen itu diberikan "position:relative," ia akan menjadi elemen berkedudukan dan akan dicat semasa langkah 3.

Dalam contoh yang diberikan, jika elemen ".container" tidak mempunyai "position:relative," maka " elemen .mask", yang mempunyai "position:absolute," akan dicat di atasnya semasa langkah 5 (selepas elemen diposisikan). Walau bagaimanapun, apabila "kedudukan:relatif" digunakan pada ".bekas", ia menjadi elemen diposisikan dan oleh itu dicat semasa langkah 3. Oleh itu, ".bekas", bersama-sama dengan anak-anaknya, akan dicat sebelum " elemen .mask", menyebabkan tindanan biru muncul di bawah teks.

Adalah penting untuk ambil perhatian bahawa susunan elemen dilukis dalam DOM (Model Objek Dokumen) tidak semestinya sepadan dengan susunan penampilannya secara visual. Nilai indeks z yang ditentukan diutamakan dalam menentukan elemen yang muncul di atas. Walau bagaimanapun, jika tiada indeks-z dinyatakan, susunan lukisan seperti yang diterangkan di atas akan digunakan.

Atas ialah kandungan terperinci Bagaimanakah `kedudukan:relatif` Memberi Impak Indeks Z dan Susunan Susunan Elemen dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!