Cara menggunakan z-index

Atribut

z-index digunakan untuk mengawal susunan susunan elemen HTML pada halaman Semakin besar nilainya, semakin tinggi elemen tersebut. Langkah penggunaan: Tetapkan atribut indeks-z untuk elemen tindanan. Tentukan integer sebagai nilai atribut Semakin besar nilai, semakin tinggi susunan susunan. Pastikan elemen induk mempunyai atribut kedudukan yang jelas, indeks-z hanya digunakan pada elemen yang diposisikan.

Cara menggunakan z-index

Atribut z-index digunakan untuk mengawal susunan susunan elemen HTML pada halaman. Nilainya ialah integer; semakin tinggi nombor, semakin tinggi elemen muncul dalam susunan susunan, di atas elemen lain.

Langkah:

1. Tetapkan atribut indeks-z untuk elemen yang ingin anda tindih.
2. Nyatakan integer sebagai nilai atribut. Semakin besar nilai, semakin tinggi susunan susunan elemen.
3. Pastikan elemen induk mempunyai atribut kedudukan yang jelas. z-index hanya berfungsi pada elemen dengan sifat kedudukan, seperti kedudukan: mutlak, kedudukan: tetap atau kedudukan: relatif.

Contoh:

<code class="html"><div style="position: relative;">
  <div style="position: absolute; z-index: 2;">元素 1</div>
  <div style="position: absolute; z-index: 1;">元素 2</div>
</div></code>

Dalam contoh ini, "Elemen 1" mempunyai indeks-z 2, manakala "Elemen 2" mempunyai indeks-z 1. "Elemen 1" akan muncul di atas "Elemen 2" kerana nilai indeks znya lebih tinggi.

Nota lain:

• Jika dua elemen mempunyai indeks-z yang sama, elemen yang diisytiharkan kemudian akan muncul di atas elemen yang diisytiharkan lebih awal.
• z-index hanya mengawal susunan susunan elemen dalam elemen induk yang sama dan tidak akan menjejaskan susunan susunan elemen lain pada halaman.
• Untuk elemen kedudukan tetap, z-index dikira relatif kepada viewport (tetingkap penyemak imbas), bukan elemen induk.

Atas ialah kandungan terperinci Cara menggunakan z-index. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!