Property z-index dalam CSS

z-index

Adalah property CSS yang digunakan untuk mengatur tumpukan elemen berdasarkan nilai indexnya.

Jika nilai indexnya lebih besar maka elemen tersebut berada didepan tumpukan elemen lainnya.

Property ini digunakan bersamaan dengan property position.

Syntax:

z-index: nilai;

Contoh:

Buatlah satu file HTML bernama zindex.html dengan isi seperti kode dibawah ini:

<style type=”text/css”> 

div {

border:1px solid black;

}

#elemen1 {

background-color:#ff9900;

width:100px;

height: 100px;

position: absolute;

top: 10;

left:35;

z-index: 2;

}

#elemen2{

background-color:#eeeeee;

width:100px;

height: 100px;

position: absolute;

top: 40;

left:45;

z-index: 3;

}

</style>

<div id=”elemen1″>

Elemen 1

</div>

<div id=”elemen2″>

Elemen 2

</div>

Hasil:

Bukalah file zindex.html melalui browsermu maka akan menampilkan seperti terlihat pada gambar dibawah ini:

Pertanyaan:

Mengapa kotak Elemen 2 berada didepan kotak Elemen 1 … ?

Jawaban:

Karena nilai  z-index dari kotak Elemen 2 lebih besar dari nilai  z-index kotak Elemen 1.

Pembuktian:

Silahkan kamu rubah-rubah nilai z-indexnya agar kamu bisa memahaminya.

 

Referensi:

http://www.quackit.com/css/properties/css_z-index.cfm

 

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura‘.

You may also like...

Leave a Reply

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