css z-index dan valuenya

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

Look at everything as though you were seeing it either for the first or last time. Betty Smith

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

Last Modif at July 8th, 2011

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.net" name="author"/>
<meta http-equiv="refresh" content="60; URL=http://www.indaam.net"/>
<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.net" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>

Rekomendasi gunakan code editor(misal, notepad ++ dll.).
Semoga bermanfaat.

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

13 thoughts on “css z-index dan valuenya”

  1. Hendro says:

    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

  2. Indam says:

    Hendro,
    Saya menulis sesuai dengan pengalaman ngoding, masalah coordinate saya sendiri ngga tahu :(

  3. Iwan says:

    Thank infonya, lalu bgmn cara membuat huruf jadi lebih kecil dan sekecil mungkin agar tidak tampil di halaman web..

  4. Iwan says:

    Thank infonya…

  5. indam says:

    iwan,
    Pake property
    font-size:/* misal */ 12px;

  6. jumat sidik says:

    wah thanks banget ya..
    sukses terus gan :-D

  7. Deka Ye says:

    Wow bedu gan. Thanks Infonya.

  8. hmmm, jadi gitu ya mas.. klo positif (misal 1, 2, dst) itu akan menutupi objek. klo negatif (misal -1, -2, -3, dst) akan di bawah objek..

    1. indam says:

      Nah, pinter banget!!!

  9. Syauqi A says:

    Bagaimana dengan yang memakai persen ? karena saya pernah lihat template itu pake z-index valuenya itu persen.Apa sama saja seperti ini ?

  10. arisman says:

    Betul zindex itu seperti layer dlm photoshop, mana yg dedpn mana yg blkng, namun kenapa kalo pake position absolute suka loncat2 ya.. ada yg pernah mangalami…? sh pake di mapxtreme adp.net.

  11. arisman says:

    Betul zindex itu seperti layer dlm photoshop, mana yg dedpn mana yg blkng, namun kenapa kalo pake position absolute suka loncat2 ya.. ada yg pernah mangalami…? sh pake di mapxtreme asp.inet.

  12. panji says:

    terima kasih mas atas tutorialnya

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-