Bagaimanakah CSS z-index Mengawal Susunan Susunan Elemen HTML?

Memahami Susunan Susunan indeks-z

Elemen Kedudukan dengan indeks-z

Sifat indeks-z dalam CSS menentukan susunan susunan unsur-unsur yang diposisikan . Secara khusus, ia menentukan elemen yang mana muncul di hadapan atau di belakang yang lain pada paksi z, yang mewakili kedalaman pada satah tiga dimensi.

Kesan pada Elemen Diposisikan

Indeks Z sahaja berfungsi pada elemen dengan kedudukan selain statik (iaitu, mutlak, relatif, tetap atau melekit). Ia tidak menjejaskan elemen dengan kedudukan statik atau elemen diletakkan menggunakan apungan.

Konteks Penimbunan

Konteks tindanan dicipta apabila elemen diletakkan dan menggunakan indeks z. Dalam konteks tindanan, sifat indeks-z menetapkan susunan susunan unsur yang diposisikan dan keturunannya. Konteks tindanan menghalang unsur-unsur dalam satu konteks daripada mengganggu susunan unsur-unsur dalam konteks yang berbeza.

Peraturan Susunan Susunan

Tertib susunan unsur-unsur tanpa indeks-z yang ditentukan adalah seperti berikut:

1. Latar belakang dan sempadan unsur akar
2. Tidak diletakkan, elemen blok tidak terapung
3. Elemen terapung tidak diposisikan
4. elemen sebaris
5. elemen diposisikan

Apabila sifat indeks-z digunakan, susunan susunan diubah suai:

1. Latar belakang dan sempadan akar elemen
2. Elemen diposisikan dengan indeks z kurang daripada 0
3. Elemen bongkah tidak terletak dan tidak terapung
4. Elemen terapung bukan kedudukan
5. Elemen sebaris
6. elemen diletakkan dengan indeks-z daripada 0
7. Elemen yang diposisikan dengan indeks z lebih besar daripada 0

Contoh Susunan Susunan

Adik Beradik Campuran