div ( z-index: 1; /* integer */ )The z-indexharta di CSS mengawal rangka susun menegak unsur-unsur yang bertindih. Seperti dalam, mana yang kelihatan seolah-olah lebih dekat dengan anda secara fizikal. z-indexhanya mempengaruhi elemen yang mempunyai nilai kedudukan selain static(lalai).
Elemen boleh bertindih dengan pelbagai alasan, misalnya, kedudukan relatif telah mendorongnya daripada sesuatu yang lain. Margin negatif telah menarik elemen ke atas yang lain. Unsur-unsur yang diposisikan sepenuhnya saling bertindih. Macam-macam alasan.
Tanpa z-indexnilai, unsur-unsur tumpukan mengikut urutan ia muncul dalam DOM (yang paling rendah turun pada tahap hierarki yang sama muncul di atas). Elemen dengan kedudukan tidak statik akan selalu muncul di atas elemen dengan kedudukan statik lalai.
Juga perhatikan bahawa bersarang memainkan peranan besar. Sekiranya elemen B berada di atas elemen A, elemen anak elemen A tidak boleh lebih tinggi daripada elemen B.
Perhatikan bahawa versi IE yang lebih lama membuat perkara konteks ini sedikit tersekat. Inilah penyelesaian jQuery untuk itu.
Maklumat lanjut
- Screencast: Bagaimana z-index berfungsi
- Dokumen MDN
- Artikel komprehensif: Memahami z-index
- Nilai indeks z rasional
Sokongan Penyemak Imbas
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Berfungsi | Berfungsi | Berfungsi | Berfungsi | 4+ | 4+ | Berfungsi |