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 tanggapan untuk “Fungsi z-index pada CSS

Tinggalkan Balasan

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