tabungan ide dan mimpi

Ketika kita membuat website, lumrah jika kita memadukan beberapa web komponen seperti ajax slideshow, dropdown menu, modal window dll. Ada masalah yang pernah saya hadapi, yaitu tidak sesuainya urutan web komponen yang saya inginkan. Terkadang dropdown menu berada di bawah layer slideshow gambar, hmmff.. hal ini important juga lho.

Setelah menggali di beberapa situs berkenaan css, saya mendapatkan solusinya pada tag css, yaitu z-index. Z-index adalah tag css yang mengatur urutan tumpukan suatu komponen (baik itu div, p, img dll).Pola kerjanya mirip sekali dengan pembuatan film kartun. Misal untuk membuat suatu film kartun, kita harus punya layer background dan layed manusia, dua layer ini memiliki urutan tumpukan. Layer paling bawah adalah layer background, dan layer diatasnya adalah manusia.Lain hal nya jika kita membalik posisi layer ini, maka gambar manusia tidak akan muncul

z-index memiliki value, yang bisa diisi dengan angka(integer), dengan aturan: nilai elemen yang lebih besar akan selalu ada di depan.

Setingan aslinya, z-index bernilai 0, dimana semua layer diurut secar natural berdasarkan urutan pengkodean. Namun jika anda memiliki 3 layer yang anda ingin urutkan, misal dalam kasus memunculkan dropdown, slideshow dan image thumbnail slideshow, maka kita bisa mengatur nilai z-index pada setiap komonen drop down dan slideshow. Untuk contoh nyatanya, nanti saya coba untuk upload beberapa contoh. Namun, jika Anda menginginkan agar suatu komponen selalu berada di atas, maka masukan nilai 1, dengan nilai z-index yang lain 0, maka komponen tadi akan selalu berada si posisi atas, tanpa terganggu oleh komponen yang lain.