Adakah indeks Z Mutlak atau Relatif dalam HTML?

Z-Index: Mutlak atau Relatif?

Dalam pembangunan web, sifat z-index mengawal susunan susunan elemen HTML. Walau bagaimanapun, persoalan biasa timbul: adakah indeks-z unsur mutlak atau relatif?

Indeks Z Mutlak lwn. Relatif

Sifat indeks-z mentakrifkan kedudukan elemen dalam dimensi ketiga, relatif kepada adik-beradiknya. Ia tidak menentukan kedudukan elemen dalam reka letak tiga dimensi keseluruhan halaman. Oleh itu, z-index adalah relatif kepada induk elemen.

Dalam contoh yang disediakan:

<code class="html"><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></code>

#dHello nest di bawah div induknya. Walaupun mempunyai indeks z yang lebih tinggi (200), ia akan muncul di belakang #dDomination kerana yang kedua mempunyai indeks z adik beradik sebanyak 100. Ini kerana indeks-z adalah relatif kepada div induk.

Standard dan Variasi Penyemak Imbas

W3C mentakrifkan sifat indeks-z sebagai relatif kepada elemen induk. Walau bagaimanapun, penyemak imbas yang berbeza mungkin mempunyai pelaksanaan yang berbeza-beza:

1. Dalam kebanyakan penyemak imbas, indeks-z adalah relatif kepada indeks-z yang dikira induk, yang biasanya 0.
2. Dalam Internet Explorer 6 dan lebih lama, z-index adalah relatif kepada akar dokumen.
3. Dalam ,** Safari dan Chrome, elemen dengan z yang sama -index disusun berdasarkan kedudukannya dalam sumber halaman.

Contoh Visualisasi

Pertimbangkan kod berikut:

<code class="html"><div id="X" style="z-index:1">
  <div id="Y" style="z-index:3"></div>
</div>
<div id="Z" style="z-index:2"></div></code>

Pada mulanya, anda mungkin menganggap # Y bertindih #Z kerana indeks znya yang lebih tinggi. Walau bagaimanapun, memandangkan #Y ialah anak kepada #X (yang mempunyai indeks-z 1), #Z akan muncul di hadapan kedua-dua #X dan #Y.

Atas ialah kandungan terperinci Adakah indeks Z Mutlak atau Relatif dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!