Cara Mengatur Z-Index CSS agar Elemen Tidak Saling Timpa

Z-index mengatur urutan tumpukan elemen pada sumbu Z, yaitu ke arah depan-belakang layar. Masalah muncul ketika sebuah elemen tetap tertimpa elemen lain meskipun nilai z-index-nya sudah besar. Penyebabnya biasanya stacking context yang terbentuk tanpa disadari, bukan angka yang kurang besar. Panduan ini membahas cara mengatur z-index CSS dengan benar, langkah demi langkah.

Pahami dulu urutan tumpukan alami

Sebelum menyentuh z-index, ingat bahwa elemen HTML memiliki urutan tumpukan default. Elemen yang muncul belakangan di markup akan menimpa elemen sebelumnya jika posisinya bertumpuk. Urutan ini hanya berlaku untuk elemen yang berada dalam satu stacking context yang sama.

Elemen dengan posisi static tidak bisa memakai z-index. Jadi, properti position harus diubah menjadi relative, absolute, fixed, atau sticky agar z-index berfungsi. Untuk memahami perilaku posisi ini lebih dalam, baca cara mengatur posisi elemen dengan CSS position.

Langkah mengatur z-index dengan benar

Berikut urutan langkah yang bisa kamu ikuti saat menemui elemen yang tidak muncul di depan.

1. Periksa apakah elemen sudah memiliki position selain static. Tanpa itu, z-index diabaikan.
2. Lihat apakah ada elemen induk yang membentuk stacking context. Elemen dengan opacity kurang dari 1, transform, filter, atau position: fixed bisa menjadi stacking context baru.
3. Pastikan elemen yang ingin ditampilkan berada dalam stacking context yang sama dengan elemen penimpa, atau atur ulang z-index pada induknya.
4. Gunakan nilai z-index yang terpisah jauh, misalnya 10, 100, 1000, agar mudah dikelola.
5. Hindari penggunaan z-index negatif kecuali benar-benar perlu, karena dapat menyembunyikan elemen di belakang latar induk.

Contoh sederhana: sebuah dropdown dengan z-index: 9999 tetap tertimpa header lain karena induk dropdown memiliki transform: translateY(0) yang menciptakan stacking context baru. Solusinya, naikkan z-index pada induk dropdown atau pindahkan elemen dropdown ke luar induk tersebut.

Kenali stacking context dan cara memeriksanya

Stacking context adalah lingkungan tempat elemen-elemen di dalamnya diurutkan. Setiap stacking context baru akan mengisolasi z-index anak-anaknya dari elemen di luar. Artinya, z-index anak tidak bisa menimpa elemen di luar konteks induknya, sekalipun nilainya sangat besar.

Beberapa properti yang memicu stacking context baru:

• position dengan nilai fixed atau sticky.
• opacity kurang dari 1.
• transform, filter, perspective, atau clip-path selain nilai default.
• isolation: isolate.
• will-change yang menunjuk ke properti pembentuk stacking context.

Untuk memeriksa stacking context, buka DevTools di browser, pilih elemen, lalu lihat panel Computed atau Layers. Di sana akan terlihat apakah elemen membentuk stacking context dan bagaimana urutan tumpukannya.

Tips menghindari konflik z-index

Konflik z-index sering muncul pada komponen seperti header sticky, modal, dropdown, dan tooltip. Beberapa kebiasaan berikut membantu menjaga layout tetap rapi.

• Buat skala z-index yang konsisten, misalnya 0 untuk konten, 10 untuk dropdown, 100 untuk header, 1000 untuk modal, dan 2000 untuk tooltip. Simpan dalam variabel CSS.
• Batasi penggunaan z-index hanya pada elemen yang memang perlu tampil di atas elemen lain.
• Hindari memberi z-index pada elemen yang tidak memiliki posisi, karena tidak akan berefek.
• Gunakan isolation: isolate pada komponen agar anak-anaknya tidak saling memengaruhi dengan komponen lain.
• Periksa kembali penggunaan transform atau opacity pada induk yang tidak disengaja.

Jika kamu sering membangun layout dengan Grid atau Flexbox, aturan z-index tetap sama. Untuk memahami dasar layout yang rapi, lihat 7 langkah layout web dengan CSS Grid dan Flexbox untuk pemula.

Contoh kasus: modal tertimpa header

Misalkan kamu punya header dengan position: sticky; z-index: 100; dan modal dengan position: fixed; z-index: 1000;. Modal tetap muncul di belakang header. Penyebabnya, modal mungkin berada di dalam elemen induk yang memiliki transform atau opacity, sehingga stacking context-nya terbatas. Solusinya, pindahkan modal ke akhir <body> atau naikkan z-index induk modal. Cara lain, hapus properti yang menciptakan stacking context pada induk jika tidak diperlukan.

Untuk komponen seperti header yang menempel, kamu bisa mempelajari cara membuat sticky header dengan CSS dan sedikit JavaScript agar tidak bentrok dengan elemen lain.

Gunakan alat bantu untuk melacak tumpukan

Selain DevTools, ada ekstensi browser yang menampilkan stacking context secara visual. Memahami konsepnya tetap lebih penting daripada mengandalkan alat. Sempatkan membaca dokumentasi MDN tentang stacking context untuk memperkuat pemahaman.

Jika kamu bekerja dengan banyak komponen, dokumentasikan skala z-index di tim. Konvensi yang jelas mengurangi perdebatan soal angka siapa yang paling besar.

Ringkasan

Mengatur z-index berarti memahami stacking context dan urutan tumpukan, bukan sekadar menaikkan angka setinggi mungkin. Pastikan elemen memiliki posisi yang tepat, periksa induk yang membentuk konteks baru, dan gunakan skala z-index yang konsisten. Dengan begitu, elemen tampil di depan sesuai keinginan tanpa trial and error berlebihan.

Pertanyaan yang Sering Diajukan

Mengapa z-index saya tidak berfungsi meskipun nilainya sudah 9999?

Kemungkinan besar elemen tersebut tidak memiliki properti position selain static, atau berada dalam stacking context yang berbeda dengan elemen penimpa. Periksa posisi dan stacking context induknya.

Apa perbedaan z-index pada elemen dengan position fixed dan absolute?

Keduanya sama-sama bisa memakai z-index asalkan posisinya bukan static. Namun, position: fixed selalu membentuk stacking context baru, sedangkan absolute tidak selalu, kecuali ada properti lain yang memicunya.

Apakah z-index negatif aman digunakan?

Z-index negatif dapat membuat elemen berada di belakang latar induknya jika induk tersebut memiliki latar. Sebaiknya hindari z-index negatif kecuali untuk keperluan khusus dan sudah diuji di berbagai browser.