Sudah lama ngga nulis tentang css, kebetulan lagi ngga ada inspirasi buat nulis hal baru, ya mau ngga mau nulis apa adanya aja 
Back to topic
z-index adalah salah satu property CSS, sedangkan fungsinya ialah(menurut saya) mengatur element mana yang diletakan di dapan atau di balakang(bukan atas bawah), sedangkan valuenya adalah bilangan real(max katakter 7 digit [kurang paham]). . . -5, -4, -3, -2, -1, 0, 1, 2, 3 , 5 . . . Dimana value tertinggi akan menekan(menutupi) elemant yang memiliki value yang lebih rendah.
contoh;
pernah gunakan photoshop?
nah, diphotosop itu ada yang namanya leyer, dan kita bisa mambuat banyak layar, asumsikan saja layer satu memiliki value z-index:1; dan layer 2 mamiliki value z-index:2; begitu selanjautnya
contoh simple
simplenya gini, bayangkan dua lembar kertas transparent, trus lembar pertama di cat dengan warna hijau, kemudian lembar kedua dicat dengan warna merah, trus letakkan lembar kedua(merah) diatas lembar pertama(hijau) jadinya lembar kedua akan menutupi lembar pertama, ia kan?
Dari kesimpulan cerita ngga jelas diatas, jika diterapkan dalam dokument web akan menjadi seperti ini.
nah, disinilah fungsi z-index, dengan z-index ini kita bisa menentukan element mana yang berada di depan, jadinya seperti ini
ket;
pada sample dua, kita asumsikan
- biru memiliki z-index dengan value 3
- hijau memiliki z-index dengan value 2
- merah memiliki z-index dengan value 1
lebih jelasnya silakan gunakan sample source berikut, lalu edit masing-masing value z-index(nya).
<html>
<head>
<title>z-index css sample by indaam[dot]com</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<meta http-equiv="refresh" content="60; URL=http://www.indaam.com"/>
<style type="text/css">
body{margin:0 auto;
padding:20px;}
.contoh-z-index-satu{
position:relative;
float:left;
margin:0;
padding:0;
background:blue;
width:200px;
height:200px;
z-index:/* edit value-nya */3;
}
.contoh-z-index-dua{
z-index:/* edit value-nya */2;
position:relative;
float:left;
margin:40px 0 0 -160px;
padding:0;
background:green;
width:200px;
height:200px}
.contoh-z-index-tiga{
position:relative;
float:left;
margin:80px 0 0 -160px;
padding:0;
background:red;
width:200px;
height:200px;
z-index:/* edit value-nya */1;
}
</style>
</head>
<body>
<div class='contoh-z-index-satu'></div>
<div class='contoh-z-index-dua'></div>
<div class='contoh-z-index-tiga'></div>
<div style="clear:both;"></div>
<p>ket*;</p>
<ul>
<li>biru memiliki z-index dengan value 3</li>
<li>hijau memiliki z-index dengan value 2</li>
<li>merah memiliki z-index dengan value 1</li>
</ul>
silakan edit value z-index untuk lebih jelasnya, untuk valuenya gunakan bilangan real
misal, . . . -5, -4, -3, -2, -1, 0, 1, 2, 3 , 5 . . . dst.<p>salam <a href="http://www.indaam.com" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>
Rekomendasi gunakan code editor(misal, notepad ++ dll.).
Semoga bermanfaat.
Yang saya tau z-index itu coordinate seperti yang saya bahas di canvas namun kalu buat CSS mas indam yang lebih paham apakah itu bersifat coordinate juga?
Saya pernah membuat demo coordinate canvas yang bisa membuat sarang laba-laba, namun berantakan..yah,, terlanjur di posting, ga apa-apa lah..hehe
Hendro,
Saya menulis sesuai dengan pengalaman ngoding, masalah coordinate saya sendiri ngga tahu
Thank infonya, lalu bgmn cara membuat huruf jadi lebih kecil dan sekecil mungkin agar tidak tampil di halaman web..
Thank infonya…
iwan,
Pake property
font-size:/* misal */ 12px;wah thanks banget ya..
sukses terus gan