CSS z-index

Properti z-index digunakan untuk menentukan urutan tumpukan elemen (stacking order). Elemen dengan nilai z-index lebih tinggi akan ditampilkan di atas elemen dengan nilai lebih rendah.

Catatan: Properti z-index hanya berfungsi pada elemen yang memiliki position selain static (yaitu relative, absolute, fixed, atau sticky).

Contoh Penggunaan z-index

<style>
  .box1 {
    position: absolute;
    left: 40px;
    top: 40px;
    width: 100px;
    height: 100px;
    background-color: red;
    z-index: 1;
  }
 
  .box2 {
    position: absolute;
    left: 70px;
    top: 70px;
    width: 100px;
    height: 100px;
    background-color: blue;
    z-index: 2;
  }
</style>
 
<div class="box1"></div>
<div class="box2"></div>

Penjelasan

• Kotak merah (z-index: 10) berada di bawah kotak biru (z-index: 20) karena nilainya lebih rendah.
• Jika z-index tidak diatur, elemen akan mengikuti urutan DOM secara default.

z-index bisa negatif

Kamu bisa menggunakan nilai negatif untuk mendorong elemen ke belakang.

<style>
  .back {
    position: absolute;
    z-index: -1;
    width: 150px;
    height: 150px;
    background-color: lightgray;
  }
 
  .front {
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;
    background-color: green;
    top: 25px;
    left: 25px;
  }
</style>
 
<div class="back"></div>
<div class="front"></div>

Dengan z-index, kamu bisa mengontrol elemen mana yang tampil di atas atau di bawah, yang sangat berguna saat membuat UI seperti modals, dropdown, tooltip, dan lainnya.