Properti style.zIndex digunakan untuk menetapkan stack order atau urutan tumpukan suatu elemen.
Elemen yang memiliki stack order lebih besar akan selalu berada di depan elemen yang memiliki stack order lebih rendah.
Sintaks:
obj.style.zIndex = value;
Nilainya:
- auto (default)
stack order suatu elemen tergantung dari elemen induknya. - integer
Dimungkinkan memberikan nilai dengan bilangan bulat positif atau negatif untuk menetapkan stack order suatu elemen. - inherit
Untuk contohnya, jalankan program 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 jika elemen telah diatur dengan properti style.position="absolute".
