Bagaimanakah CSS z-index Mempengaruhi Susunan Susun Unsur?

Memahami Susunan Susunan Unsur CSS

Dalam CSS, sifat z-index memainkan peranan penting dalam menentukan susunan susunan unsur , tetapi ia boleh mengelirukan untuk memahami cara ia berinteraksi dengan sifat kedudukan yang berbeza.

Bagaimana Susunan Susun Berfungsi

Susunan tindanan merujuk kepada kedalaman relatif elemen bertindih pada halaman web. Elemen dengan nilai indeks z yang lebih tinggi muncul di hadapan elemen dengan nilai yang lebih rendah. Walau bagaimanapun, indeks-z hanya terpakai pada elemen yang diposisikan (iaitu, elemen dengan kedudukan: mutlak, relatif, tetap atau melekit).

Interaksi dengan Elemen Kedudukan dan Tidak Kedudukan

• Elemen bukan kedudukan (kedudukan: statik) sentiasa disusun di bawah kedudukan elemen.
• Jika tiada z-indeks ditentukan untuk elemen diposisikan, ia mengikut susunan susunan lalai berdasarkan susunan kod sumber.
• Jika nilai indeks-z digunakan, elemen diposisikan disusun berdasarkan nilai tersebut, tanpa mengira susunan kod sumbernya.
• Elemen dengan nilai indeks z negatif muncul di belakang latar belakang dan sempadan akar elemen.

Konteks Penimbunan

Konteks tindanan ialah kawasan segi empat tepat dalam dokumen yang berfungsi sebagai bekas untuk elemen yang diletakkan. Setelah elemen diletakkan dan indeks-z digunakan, ia mencipta konteks tindanan baharu yang memisahkan elemen anak daripada konteks tindanan lain.

Implikasi untuk Jenis Unsur Campuran

1. Elemen Adik Bercampur Bercampur:

• Jika elemen adik beradik mempunyai kedudukan yang berbeza (kedudukan bercampur dan tidak berkedudukan), elemen yang diposisikan dengan nilai indeks z akan sentiasa disusun di hadapan elemen yang tidak diposisikan .
• Jika kedua-dua elemen adik-beradik diletakkan dengan nilai indeks-z, elemen dengan nilai yang lebih tinggi akan muncul dalam hadapan.

2. Elemen Adik Bersarang dan Campuran:

• Jika elemen induk diposisikan mengandungi kedua-dua elemen anak berkedudukan dan tidak berkedudukan:

  • Elemen anak yang diposisikan ialah disusun dalam konteks tindanan ibu bapa.
  • Elemen anak tidak diposisikan disusun di bawah induk diposisikan elemen, tanpa mengira sebarang nilai indeks-z.
• Jika elemen kedudukan bersarang mempunyai nilai indeks z yang bercanggah, elemen dengan nilai yang lebih tinggi dalam konteks tindanan paling dalam akan muncul di hadapan.

Contoh

Pertimbangkan HTML berikut kod:

<div>
  <div>

Dalam contoh ini, Kotak 1 akan muncul di hadapan Kotak 2 kerana ia mempunyai indeks-z yang lebih tinggi dalam konteks tindanan yang dicipta oleh div induknya. Kotak 2, yang mempunyai kedudukan dan indeks z yang lebih rendah, akan muncul di belakang Kotak 1.

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