Bagaimanakah `kedudukan: relatif;` Kesan Indeks Z dan Susunan Susunan Unsur?

Mengapa Kedudukan: relatif; Menjejaskan Z-Index?

Tanpa diduga, kedudukan tetapan: relatif; pada elemen boleh kelihatan menukar indeks-znya. Ini berlaku disebabkan oleh susunan konteks susun, yang dikenali sebagai susunan lukisan.

Tempahan Lukisan Standard

Tanpa kedudukan: relatif;, elemen dicat pada langkah keempat dalam susunan:

1. Elemen akar
2. Sebaris, tidak diletakkan keturunan
3. Keturunan sebaris-bongkah
4. Alir masuk, tidak berkedudukan, keturunan peringkat blok

Melukis dengan kedudukan: relatif;

Menambah kedudukan: relatif; kepada elemen menjadikannya diposisikan, jadi ia kini dicat pada langkah kelapan bersama-sama elemen kedudukan lain:

5. Keturunan sebaris, tidak diletakkan, blok sebaris
6. Sebaris, bukan -keturunan diposisikan daripada elemen diposisikan
7. Keturunan bukan teks diposisikan daripada blok sebaris elemen
8. Semua diposisikan, kelegapan atau transformasi keturunan dalam susunan pokok (melainkan ia tertakluk kepada tertib indeks-z)

Memandangkan kedua-duanya bekas dan topeng diletakkan dalam kes ini dan tiada indeks-z dinyatakan, susunan lukisan mereka ditentukan oleh susunan pokok. Secara lalai, topeng diletakkan selepas bekas dalam HTML, jadi ia dicat kemudian.

Mengapa Teks Disembunyikan

Asalnya, tanpa kedudukan: relatif;, teks tajuk tersembunyi di belakang tindanan biru kerana topeng dicat pada langkah kemudian. Walau bagaimanapun, apabila kedudukan: relatif; digunakan pada bekas, ia menjadi kedudukan dan oleh itu juga dicat pada langkah lapan. Memandangkan bekas diletakkan sebelum topeng dalam HTML dan kedua-duanya tidak mempunyai indeks-z yang ditentukan, bekas itu dicat terlebih dahulu, menyebabkan teks muncul di atas topeng.

Atas ialah kandungan terperinci Bagaimanakah `kedudukan: relatif;` Kesan Indeks Z dan Susunan Susunan Unsur?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!