Бұл стильдік қасиет экрандағы элементтің қай деңгейде (қай қабатта) орналасуы керек екендігін анықтайды. Мұндағы негізгі деңгейдің нөмірі (элементтер стильдік анықтаусыз-ақ шығатын деңгей) нөлге тең болып саналады. Сәйкесінше, экран қабатын анықтайтын теріс Z-index мәні бар элементтер төменде (алыста), ал оң мәнді элементтер — жоғарыда (жақын) орналасады. Егер элементтердің Z-index мәндері бірдей болса, олар бір қабатта орналасады. Сонымен Z-index мәні үлкен элемент жоғары деңгейде орналасады екен.
Енді мысал қарастырайық.
<HTML>
<HEAD>
<TITLE> Z-index </TITLE>
</HEAD>
<BODY bgcolor=white text=black>
<H2>Z-index</H2> <HR>
<DIV style= "position:absolute; top:50;
left:140; height:130; width:100;
background:red; font-size:60;
color:white; z-index:3">
Бұл жақын </DIV>
<DIV style="position:absolute; top:50;
left:360; height:30; width:100;
background:blue; font-size:30;
color:white; z-index:1">
Бұл қашық</DIV>
<DIV style="position:absolute; top:80;
left:270; width:125; z-index:2">
<IMG src=11494[2].jpg width=125 height=82
alt ="">
</DIV>
</BODY>
</HTML>