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

s dengan dan tanpa Kedudukan :

• div.sibling-1 telah kedudukan: statik dan indeks z: 0
• div.sibling-2 mempunyai kedudukan: mutlak dan z-index: 1

Keputusan: div.sibling -2 akan muncul di hadapan div.sibling-1 kerana indeks znya lebih tinggi.

Bersarang

s dengan Adik Beradik

s:

• div.container mempunyai kedudukan: statik dan z-index: 0

  • div.child-1 mempunyai kedudukan: statik dan indeks-z: 0
  • div.child-2 mempunyai kedudukan: mutlak dan z-index: 1
• div.sibling mempunyai kedudukan: relatif dan z-index: 2

Keputusan: div.sibling akan muncul di hadapan kedua-dua div kanak-kanak kerana ia adalah diletakkan dengan indeks-z yang lebih tinggi dalam konteks tindanan yang berbeza.

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

css less html Static using Property position Other

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Mencipta Pengaki Melekit Yang Kekal di Bahagian Bawah Halaman atau Kandungan, Mana Yang Lebih Rendah?Artikel seterusnya：Bagaimanakah Saya Boleh Mencipta Pengaki Melekit Yang Kekal di Bahagian Bawah Halaman atau Kandungan, Mana Yang Lebih Rendah?

Artikel berkaitan

Lihat lagi

• Ringkasan perkara yang perlu anda perhatikan tentang Border semasa menulis CSS
• Bagaimana untuk merealisasikan pemilihan berbilang gaya dan penukaran masa nyata gaya_Pertukaran pengalaman
• Analisis penggunaan terperinci marquee
• CSS标题线（删除线贯穿线效果）实现
• CSS3中优雅降级和渐进增强的区别

Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！

Tentang kitaPenafianSitemap

© php.cn All rights reserved