Fungsi z-index pada CSS

Properti z-index berfungsi untuk mengatur susunan layer pada browser.
Sebetulnya sebuah tag HTML seperti tag div misalnya adalah sebuah layer yang disusun secara berurutan, tapi dengan Properti z-index anda bisa mengatur susunannya sesuai keinginan anda.
Properti z-index dapat bernilai bilangan integer mulai dari nol ke atas, semakin besar nilai bilangannya maka susunannya menjadi semakin diatas.

Properti z-index akan berfungsi bila disertai dengan properti “position” seperti position:relative atau position:absolute.

Baiklah untuk lebih memperjelas fungsi z-index, saya akan memberikan ilustrasi seperti ini, Dalam sebuah halaman web terdapat 3 div yaitu:

<div class=”layer_1″>BERWARNA BIRU</div>
<div class=”layer_2″>BERWARNA HIJAU</div>
<div class=”layer_3″>BERWARNA KUNING</div>

Selanjutnya masing-masing class selector diberi style sepertti berikut:

div.layer_1 {
background-color:blue;
position:relative;
left:0;
top:0;
z-index:0;
}
div.layer_2 {
background-color:green;
position:relative;
left:20px;
top:-20px;
z-index:1;
}
div.layer_3 {
background-color:yellow;
position:relative;
left:40px;
top:-40px;
z-index:2;
}

div.layer_1, div.layer_2, div.layer_3 {
width:200px;
padding:20px 15px;
text-align:center;
font-size:14px;
font-weight:bold;
color:#000000;}

hasilnya akan tampak seperti dibawah ini:

BERWARNA BIRU
BERWARNA HIJAU
BERWARNA KUNING

Bila anda ingin merubah susunan layer tersebut, anda tinggal meng edit bilangan integer yang menjadi nilai z-index. dan kalau belum jelas tentang penggunaan z-index, silahkan isi comment form dibawah…! mudah mudahan Saya bisa bantu anda.

5 comments for “Fungsi z-index pada CSS

  1. 1 Juli 2009 at 22:43

    Makasih atas infonya.

  2. 4 November 2009 at 12:42

    wah, makasih banget yach mas. dari dulu saya masih belum ngerti soal z-index ini. tapi sekarang udah mulai paham dech…..

  3. 14 April 2010 at 21:34

    mantab banget, langsung ke tekape… hehehe thanks mas

  4. 10 Mei 2010 at 15:39

    thx bnget nih infonya 😀
    Sangat bermanfaat!

  5. Mbah Goblog
    19 April 2011 at 12:19

    Mkasih gan ilmunya ….. mantab abis

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *