Mengapakah `kedudukan: relatif` Nampak Menjejaskan Susunan Susunan Seperti `z-index`?

Mengapa Kod Anda Menunjukkan Gelagat Seperti Indeks-Z

Dalam penanda anda, elemen .container mempunyai kedudukan: relatif, yang anda perhatikan nampaknya meniru kesan indeks-z. Tingkah laku ini berpunca daripada tertib lukisan CSS.

Tertib Pengecatan dan Kedudukan

Spesifikasi CSS menentukan susunan lapisan dilukis pada skrin. Tanpa kedudukan: relatif, elemen .container anda ialah "in-flow" dan dicat dalam langkah 4 susunan lukisan.

Sebaliknya, apabila anda menambah kedudukan: relatif, .container menjadi "diposisikan" dan jatuh di bawah langkah 8 pesanan lukisan.

Tempahan Pokok Lukisan

Dalam setiap langkah lukisan, elemen dicat dalam "tertib pokok." Dalam kes anda, kedua-dua elemen .container dan .mask ialah elemen yang diposisikan. Memandangkan kedua-duanya tidak mempunyai nilai indeks-z yang jelas, susunan pokok menentukan yang dicat di atas.

Menyusun Semula Elemen

Dalam penanda awal anda, elemen .mask muncul selepas .bekas dalam hierarki. Oleh itu, apabila kedua-dua elemen diposisikan, .mask dicat terakhir, meliputi .container.

Namun, jika anda menyusun semula elemen supaya .container berada selepas .mask, kedua-dua elemen akan dicat di bawah langkah 8 , masih dalam susunan pokok. Dalam senario ini, .container akan dicat terakhir, mengalih keluar "kelakuan indeks-z" yang anda perhatikan sebelum ini.

Atas ialah kandungan terperinci Mengapakah `kedudukan: relatif` Nampak Menjejaskan Susunan Susunan Seperti `z-index`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!