Ketika elemen-elemen saling bertumpukan, properti z-index menentukan elemen mana yang berada di lapisan paling atas (paling dekat dengan mata pengguna).
Elemen dengan nilai z-index yang lebih besar akan selalu menutupi elemen dengan nilai z-index yang lebih kecil. Catatan: z-index hanya berfungsi pada elemen yang memiliki posisi (relative, absolute, fixed, atau sticky).
<!DOCTYPE html>
<html>
<head>
<style>
.lapisan-bawah { position: absolute; left: 20px; top: 20px; width: 120px; height: 120px; background: #0d2e5c; z-index: 1; border-radius: 8px; color: white; padding: 10px; }
.lapisan-atas { position: absolute; left: 60px; top: 60px; width: 120px; height: 120px; background: #04AA6D; z-index: 2; border-radius: 8px; color: white; padding: 10px; }
</style>
</head>
<body style="position:relative; height:200px;">
<div class="lapisan-bawah">Z-Index: 1</div>
<div class="lapisan-atas">Z-Index: 2 (Di Depan)</div>
</body>
</html>Modal dialog dan popup biasanya diberi z-index: 1050; agar selalu tampil di atas seluruh konten halaman.
Elemen dengan z-index berapa yang akan tampil di lapisan paling depan?