Bagaimanakah Elemen Kawalan z-index Bertindih dalam CSS?

Memahami susunan tindanan indeks-z

Tertib tindanan menentukan susunan unsur bertindih pada halaman web. Sifat z-index digunakan untuk mengawal susunan susun, memberikan nilai yang lebih tinggi kepada elemen yang sepatutnya muncul di hadapan orang lain.

Memahami Kedudukan dan z-index

indeks-z digunakan pada elemen kedudukan (mutlak, relatif, tetap, melekit) dan item lentur atau grid dengan kedudukan: statik.

Konteks Penimbunan

Apabila elemen diletakkan, konteks tindanan dicipta, yang mengehadkan skop indeks-z kepada elemen dan keturunannya.

Tempahan Susun

Dalam susunan susun tanpa z-index, elemen ikut tertib:

1. Latar belakang dan sempadan elemen akar
2. Blok tidak diposisikan (statik), kemudian elemen terapung (mengikut susunan penampilan)
3. Elemen sebaris
4. Elemen diletakkan (mengikut urutan penampilan)

Dengan indeks-z:

1. Latar belakang dan sempadan elemen akar
2. Elemen diletakkan dengan indeks-z < 0
3. Blok tidak diposisikan, kemudian elemen terapung (mengikut susunan penampilan)
4. Elemen sebaris
5. Elemen diposisikan (mengikut susunan penampilan)
6. Diposisikan elemen dengan indeks-z > 0

Contoh

Div adik beradik campuran:

• Div1: kedudukan: saudara, z- indeks: 10;
• Div2: kedudukan: statik;
• Div3: kedudukan: tetap, z-index: 20;

Div3 akan bertindih Div1 dan Div2, manakala Div1 akan bertindih Div2.

Bersarang dan bercampur div:

• Div1: kedudukan: mutlak, indeks-z: 10;
• Div2: kedudukan: statik;
• Div3: kedudukan: tetap, indeks-z: 20;
• Div4: kedudukan: relatif, indeks-z: 15;

Div3 akan bertindih semua div. Div4 akan bertindih Div1 dan Div2, manakala Div1 akan bertindih Div2.

Atas ialah kandungan terperinci Bagaimanakah Elemen Kawalan z-index Bertindih dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!