» » Css Z-Index Dan Valuenya
Kamis, 20 Februari 2014

Css Z-Index Dan Valuenya

Unknown
CSS
Kamis, 20 Februari 2014
Belum ada komentar

Z-index adalah salah satu property css(cascading style sheet) sedangkan fungsi dari z-index ialah mengatur posisi element, berikut contoh

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.

Source: http://www.indaam.com/2011/02/css-z-index-dan-valuenya/

Langganan: Posting Komentar (Atom)