Categories: Style DOM

Style.Zindex

Properti style.zIndex dipakai untuk menetapkan stack order atau urutan tumpukan suatu elemen.

Elemen yang mempunyai stack order lebih besar akan selalu berada di depan elemen yang mempunyai stack order lebih rendah.

Sintaks:

obj.style.zIndex = value;

Nilainya:

auto (default)
stack order suatu elemen tergantung dari elemen induknya.
integer
Dimungkinkan memperlihatkan nilai dengan bilangan lingkaran kasatmata atau negatif untuk menetapkan stack order suatu elemen.
inherit

Untuk contohnya, jalankan agenda di bawah dengan browser, klik tombol yang ada, dan lihat tampilannya:

<HTML> <HEAD> <TITLE>style.zIndex</TITLE> <STYLE TYPE="text/css"> #mydiv_1 { z-index: 1; background-color: green; width: 80px; height: 80px; position: absolute; top: 80px; left: 80px; } #mydiv_2 { z-index: 2; background-color: red; width: 80px; height: 80px; position: absolute; top: 120px; left: 130px; } </STYLE> <SCRIPT TYPE="text/javascript"> function Func_1() { var divElem_1 = document.getElementById("mydiv_1"); var divElem_2 = document.getElementById("mydiv_2"); divElem_1.style.zIndex = "2"; divElem_2.style.zIndex = "1"; } function Func_2() { var divElem_1 = document.getElementById("mydiv_1"); var divElem_2 = document.getElementById("mydiv_2"); divElem_1.style.zIndex = "1"; divElem_2.style.zIndex = "2"; } </SCRIPT> </HEAD> <BODY> <DIV ID="mydiv_1"></DIV> <DIV ID="mydiv_2"></DIV> <BUTTON ID="mybutton_1" TYPE="button" ONMOUSEDOWN="Func_1();" ONMOUSEUP="Func_2();">Tukar posisi</BUTTON> </BODY> </HTML>

Catatan: Properti style.zIndex hanya akan bekerja kalau elemen telah diatur dengan properti style.position="absolute".

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.

Ahmad Code