z-index adalah property css yang mulai ada pada css2, fungsinya yaitu untuk mengatur posisi depan atau belakang suatu elemen.
Value untuk property z-index berupa
angka. Minimum value adalah 0. Tapi untuk browser-browser dengan versi
lama bisa berupa angka negatif. Sedangkan value maximum adalah
2147483647 (32 bit), berlaku untuk browser-browser modern minimum versi:
IE6, IE7, IE8, Opera 9, Safari 4, Firefox 6, Firefox 3. Untuk Safari 3
maximum value untuk z-index adalah 16777271.
Semakin tinggi value z-index maka elemen tersebut akan tampak semakin di depan. Bingung? coba lihat gambar dibawah ini:
Berikut contoh source code-nya:
<html>
<head>
<title>z-index @Khoiruddin.Com</title>
<style type="text/css">
body{
margin:0 auto;
padding:20px;
}
.kotak-merah{
position:relative;
float:left;
margin:0;
padding:0;
background:red;
width:200px;
height:200px;
z-index:3;
}
.kotak-kuning{
z-index:2;
position:relative;
float:left;
margin:40px 0 0 -160px;
padding:0;
background:yellow;
width:200px;
height:200px
}
.kotak-hijau{
position:relative;
float:left;
margin:80px 0 0 -160px;
padding:0;
background:green;
width:200px;
height:200px;
z-index:1;
}
.tulisan-merah{
top:200px;
left:155px;
position:fixed;
font-family:Arial, Helvetica, sans-serif;
}
.tulisan-kuning{
top:240px;
left:195px;
position:fixed;
font-family:Arial, Helvetica, sans-serif;
}
.tulisan-hijau{
top:280px;
left:235px;
position:fixed;
font-family:Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div class='kotak-merah'>
<div class="tulisan-merah">z-index 3</div>
</div>
<div class='kotak-kuning'>
<div class="tulisan-kuning">z-index 2</div>
</div>
<div class='kotak-hijau'>
<div class="tulisan-hijau">z-index 1</div>
</div>
</body>
</html>
Referensi: http://www.codicode.com/art/minimum_and_maximum_value_of_z_index.aspx
http://www.puidokas.com/max-z-index/
http://www.indaam.com/2011/02/css-z-index-dan-valuenya/
http://www.w3schools.com/cssref/default.asp
Tidak ada komentar:
Posting Komentar