Bagaimanakah `kedudukan:relatif;` Nampak Mempengaruhi indeks Z?

Memahami Kesan kedudukan:relatif; pada Indeks-Z

Dalam senario tertentu, menggunakan "kedudukan: saudara;" pada elemen nampaknya mengubah suai indeks-znya, yang membawa kepada kekeliruan. Jawapan ini bertujuan untuk menjelaskan tingkah laku ini dengan merujuk kepada spesifikasi susunan lukisan CSS.

Tempahan Lukisan CSS

Turutan lukisan CSS menentukan urutan elemen HTML dilukis ke skrin. Untuk elemen tidak berkedudukan (iaitu, tanpa set "position:absolute;" atau "position:relative;"), ia dilukis mengikut susunan penanda HTML (langkah 4). Walau bagaimanapun, elemen diposisikan (seperti .mask dalam contoh kod yang disediakan) dicat kemudian, selepas semua elemen tidak diposisikan (langkah 8).

Kesan Kedudukan Relatif

Apabila jawatan:saudara; digunakan pada elemen (seperti .bekas), ia menjadi kedudukan relatif kepada aliran biasa. Akibatnya, ia dialih keluar daripada urutan pengecatan langkah 4, sebaliknya jatuh di bawah langkah 8 dengan elemen kedudukan lain.

Dalam kod yang diberikan, .mask dilukis dalam langkah 8 (kerana ia diletakkan secara mutlak), manakala .bekas (tanpa position:relative;) akan dicat dalam langkah 4. Oleh itu, .mask muncul di hadapan .bekas, seperti yang dijangkakan.

Walau bagaimanapun, jika kedudukan:relatif; digunakan pada .bekas, ia juga berada di bawah perintah pengecatan langkah 8. Memandangkan kedua-dua .mask dan .container diposisikan dan tidak mempunyai z-index yang ditentukan, elemen yang muncul kemudian dalam dokumen (iaitu, .container) akan dicat di atas elemen lain (iaitu, .mask).

Kesimpulan

Dengan memahami susunan lukisan CSS, menjadi jelas mengapa menetapkan jawatan:saudara; pada elemen bekas boleh kelihatan menjejaskan indeks-znya. Tingkah laku ini disebabkan oleh elemen menjadi diposisikan dan dengan itu dicat kemudian dalam proses pemaparan, mengakibatkan perubahan dalam susunan visual berbanding dengan elemen kedudukan lain.

Atas ialah kandungan terperinci Bagaimanakah `kedudukan:relatif;` Nampak Mempengaruhi indeks Z?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!