z-index dan stacking
z-index menentukan siapa di atas siapa — tapi hanya bekerja pada elemen yang punya position selain static. Nilai besar tidak selalu menang: elemen di dalam parent dengan z-index rendah terkurung di lapisan parent-nya (stacking context). Praktik baik: pakai skala kecil dan konsisten (10, 20, 30), bukan z-index: 99999. Kalau elemen tetap tertimpa padahal nilainya sudah tinggi, periksa induknya: begitu induk punya z-index sendiri, anaknya tidak bisa keluar dari lapisan itu.
👀 Contoh dulu
/* z-index DIABAIKAN: position masih static */
.a { z-index: 999; }
/* z-index BERLAKU */
.b { position: relative; z-index: 2; }Hasilnya: .a tetap tertimpa meski nilainya 999, sedangkan .b dengan nilai 2 berhasil tampil di atas.
💡 Syarat z-index bekerja: elemen harus punya position relative/absolute/fixed/sticky.
📝 Sekarang giliranmu
Buat .depan tampil di atas .belakang: beri .depan position: relative dan z-index: 10.