Bagaimanakah Z-Index Berfungsi Dalam Bekas Induk: Mutlak atau Relatif?

Adakah Indeks-Z Ditentukan Secara Mutlak atau Relatif Dalam Bekasnya?

Sifat indeks-z mentakrifkan kedudukan elemen dalam susunan susunan dokumen itu. Walau bagaimanapun, adalah penting untuk memahami cara z-index berinteraksi dengan elemen dalam bekas induknya.

Tertib Susunan Relatif

Z-index pada asasnya ialah nilai relatif. Dalam bekas induk tunggal, elemen dengan nilai indeks z yang lebih tinggi akan muncul di hadapan elemen dengan nilai yang lebih rendah. Tertib tindanan ini ditentukan oleh z-index elemen induk, bukan oleh z-index seluruh dokumen.

Contoh:

Pertimbangkan kod berikut:

<div style="z-index:-100">
    <div id="dHello" style="z-index:200">Hello World</div>
</div>

<div id="dDomination" style="z-index:100">I Dominate!</div>

Hasil:

Walaupun indeks z #dHello ditetapkan kepada 200, ia muncul di belakang #dDomination. Ini kerana indeks z #dHello dikira relatif kepada indeks z div induknya, yang mempunyai indeks z -100. Akibatnya, #dDomination, dengan indeks-z 100, akan muncul di hadapan kedua-dua elemen.

Variasi Pelayar

Pelaksanaan indeks-z boleh berbeza sedikit merentas pelayar yang berbeza, tetapi prinsip umum susunan susunan relatif dalam bekas tetap sama. Vendor penyemak imbas mungkin berbeza dalam cara mereka mengendalikan kes kelebihan tertentu, tetapi gelagat keseluruhan adalah konsisten dengan sifat relatif z-index.

Kesimpulan

Apabila memanipulasi tindanan susunan elemen dalam halaman web, adalah penting untuk memahami sifat relatif z-index. Menetapkan nilai indeks-z yang lebih tinggi hanya menjamin bahawa elemen akan muncul di hadapan elemen lain dalam bekas induk yang sama. Untuk mencapai kedudukan mutlak, teknik CSS lain, seperti kedudukan tetap, mesti digunakan.

Atas ialah kandungan terperinci Bagaimanakah Z-Index Berfungsi Dalam Bekas Induk: Mutlak atau Relatif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!