Z-indeks - Trik CSS

Anonim
div ( z-index: 1; /* integer */ )

The z-indexproperti di CSS mengontrol urutan susun vertikal elemen yang tumpang tindih. Seperti, yang mana tampak seolah-olah secara fisik lebih dekat dengan Anda. z-indexhanya mempengaruhi elemen yang memiliki nilai posisi selain static(default).

Elemen dapat tumpang tindih karena berbagai alasan, misalnya, pemosisian relatif telah mendorongnya ke hal lain. Margin negatif telah menarik elemen tersebut ke atas yang lain. Elemen yang benar-benar diposisikan saling tumpang tindih. Segala macam alasan.

Tanpa z-indexnilai apa pun , elemen ditumpuk sesuai urutan kemunculannya di DOM (yang paling rendah di bawah pada tingkat hierarki yang sama muncul di atas). Elemen dengan pemosisian non-statis akan selalu muncul di atas elemen dengan pemosisian statis default.

Perhatikan juga bahwa bersarang memainkan peran besar. Jika elemen B berada di atas elemen A, elemen turunan dari elemen A tidak akan pernah lebih tinggi dari elemen B.

Perhatikan bahwa versi IE yang lebih lama membuat hal-hal konteks ini sedikit kacau. Berikut perbaikan jQuery untuk itu.

Informasi Lebih Lanjut

  • Screencast: Cara Kerja z-index
  • Dokumen MDN
  • Artikel komprehensif: Memahami z-index
  • Nilai z-index yang rasional

Dukungan Browser

Chrome Safari Firefox Opera YAITU Android iOS
Bekerja Bekerja Bekerja Bekerja 4+ 4+ Bekerja