Overlap di layout CSS muncul ketika dua elemen menempati ruang yang sama di layar. Penyebab paling sering adalah kombinasi position, z-index, dan stacking context yang tidak kamu sadari. Daripada menaikkan nilai z-index terus-menerus, ikuti urutan pemeriksaan di bawah agar masalahnya ketemu dalam hitungan menit.
Kenali Dulu: Konten Menumpuk atau Elemen Bertabrakan?
Dua gejala ini terlihat mirip tapi obatnya berbeda. Konten menumpuk biasanya soal urutan tumpukan (stacking), sedangkan elemen bertabrakan lebih ke perhitungan lebar dan posisi. Pisahkan diagnosisnya sebelum menyentuh kode.
- Menumpuk: header menutupi judul halaman, tooltip tertutup gambar, dropdown tersembunyi di belakang kartu.
- Bertabrakan: dua kolom melebar melewati kontainer, tombol keluar dari kartu, teks panjang mendorong elemen lain.
Untuk kasus kedua, mulai dari lebar. Buka DevTools, pilih elemen, lalu lihat kotak biru dan oranye pada tab Layout. Kalau kotak oranye (margin) atau biru (padding) melewati batas induk, masalahnya bukan z-index sama sekali.
Langkah 1: Periksa position dan z-index Aktual
Nilai z-index hanya bekerja pada elemen yang punya position selain static, atau pada elemen flex/grid item dengan z-index tertentu. Elemen dengan position: static tidak akan peduli seberapa besar angka z-index yang kamu tulis.
Cara cepat memeriksanya:
- Klik kanan elemen yang tertutup, pilih Inspect.
- Di panel Styles, cari properti
positiondanz-index. - Kalau z-index tercoret (strikethrough), artinya aturan itu tidak berlaku karena kalah spesifisitas atau position-nya static.
- Naikkan elemen ke lapisan yang sama dulu, baru bandingkan angkanya.
Bandingkan hanya elemen yang berada dalam satu stacking context. Kalau induknya punya transform, opacity kurang dari 1, atau filter, anak-anaknya terkurung dalam konteks baru. Z-index 9999 di dalamnya tidak akan pernah mengalahkan elemen di luar konteks tersebut.
Langkah 2: Cari Stacking Context yang Tidak Disengaja
Salah satu jebakan paling umum: kamu menambahkan transform: translateY(-4px) untuk animasi hover, lalu tiba-tiba dropdown di dalamnya terpotong atau turun ke belakang elemen lain. Properti seperti transform, will-change, perspective, dan isolation: isolate membuat elemen menjadi konteks tumpukan sendiri.
Kalau z-index besar tidak berfungsi, kemungkinan besar kamu sedang berperang melawan stacking context, bukan angka.
Solusi praktisnya: pindahkan elemen yang perlu tampil di atas ke luar dari induk yang punya transform, atau beri induk tersebut position: relative dan z-index yang lebih tinggi dari tetangganya. Hindari menambah z-index baru sebelum memastikan tidak ada konteks tersembunyi di jalur induk.
Langkah 3: Tangani Elemen Posisi Fixed dan Sticky
Header fixed yang menutupi judul section adalah kasus klasik. Penyebabnya bukan z-index, tapi konten di bawahnya tidak diberi ruang. Ada dua perbaikan yang lazim dipakai:
- Beri
padding-toppadabodyatau pembungkus utama sebesar tinggi header. - Gunakan
scroll-margin-toppada target anchor agar judul tidak tertutup saat berpindah tautan.
Untuk sidebar sticky, baca pembahasan khusus di cara membuat sidebar sticky dengan CSS position: sticky, karena perilaku sticky sangat bergantung pada tinggi induk dan properti overflow.
Langkah 4: Periksa overflow pada Induk
Kalau dropdown atau tooltip terpotong, cek overflow di setiap induk dari elemen tersebut sampai ke body. Nilai hidden atau auto akan memotong apa pun yang keluar dari kotak induk. Ini sering terjadi pada kartu dengan overflow: hidden untuk membulatkan sudut gambar.
Perbaikannya bisa dengan memindahkan elemen melayang ke luar kartu, atau memakai overflow: visible pada induk yang tidak benar-benar butuh pemotongan. Kalau butuh sudut membulat pada gambar, gunakan border-radius langsung pada elemen gambar, bukan pada pembungkus dengan overflow hidden.
Langkah 5: Uji dengan Mode Sorot dan Satu Perubahan per Langkah
DevTools punya alat bantu yang jarang dipakai pemula. Di panel Elements, klik kanan elemen lalu pilih Scroll into view untuk memastikan posisinya. Kamu juga bisa menonaktifkan properti satu per satu lewat checkbox di panel Styles untuk melihat mana yang memicu tumpukan.
Lakukan satu perubahan, lalu amati. Mengubah z-index, position, dan overflow sekaligus membuat kamu tidak tahu mana yang benar-benar menyelesaikan masalah. Kalau sudah menemukan kombinasi yang bekerja, rapikan urutan deklarasinya di CSS agar tidak bergantung pada nilai acak.
Kebiasaan yang Mencegah Overlap Berulang
Struktur halaman yang rapi menghemat banyak waktu debug. Susun lapisan secara eksplisit, misalnya header 100, dropdown 200, modal 300, dan toast 400. Tulis angka-angka itu di satu tempat sebagai variabel CSS atau komentar. Hindari angka seperti 9999 karena lama-lama tidak ada lagi ruang untuk menaikkan prioritas.
Selain itu, biasakan memulai layout dari kerangka induk yang jelas, seperti dijelaskan pada 7 tips layout web untuk pemula: mulai dari struktur halaman. Kalau butuh mengatur dua area berdampingan, gunakan pendekatan yang sudah teruji di cara membuat layout dua kolom dengan CSS Grid dan Flexbox agar tidak perlu mengakali posisi dengan margin negatif.
Saat menguji tampilan di berbagai perangkat, pastikan juga koneksi stabil supaya hasil render tidak tertukar dengan masalah cache. Panduan memilih server ping terbaik untuk uji koneksi bisa membantu memastikan lambatnya loading bukan penyebab elemen terlihat tumpang tindih sementara.
Terakhir, kalau layout memuat komponen pihak ketiga seperti widget atau iframe, batasi area yang boleh dipakai lewat max-width dan contain. Konten eksternal yang mengubah ukuran sendiri sering menjadi sumber tabrakan yang sulit dilacak.
Ringkasan
Overlap CSS hampir selalu bisa dilacak lewat empat pemeriksaan: position dan z-index yang aktif, stacking context tak sengaja, overflow induk, serta ruang untuk elemen fixed. Kerjakan berurutan, ubah satu properti per langkah, dan simpan skala z-index yang konsisten. Dengan begitu, kamu berhenti menebak dan mulai memperbaiki.
Pertanyaan yang Sering Diajukan
Kenapa z-index 9999 tetap tidak menaikkan elemen saya?
Kemungkinan elemen tersebut berada di dalam stacking context lain yang lebih rendah. Periksa induknya: kalau ada transform, opacity di bawah 1, filter, atau isolation, anak-anaknya terkunci dalam konteks itu. Naikkan z-index pada induk, bukan pada anak.
Apa bedanya elemen tertutup dan elemen bertabrakan?
Elemen tertutup berarti urutan tumpukannya salah, biasanya soal position dan z-index. Elemen bertabrakan berarti ukuran atau posisinya melewati batas kontainer, biasanya soal lebar, padding, atau margin. Periksa lebar dulu untuk kasus kedua sebelum menyentuh z-index.
Bagaimana cara aman menguji perbaikan tanpa merusak layout lain?
Lakukan di DevTools sebelum mengubah file CSS. Nonaktifkan satu properti, lihat hasilnya, lalu aktifkan kembali. Setelah menemukan penyebabnya, terapkan satu perubahan di kode, muat ulang, dan pastikan bagian lain tidak bergeser. Untuk komponen yang memuat data sensitif seperti formulir, sekalian tinjau cara melindungi data pribadi di aplikasi pinjaman online sebagai kebiasaan memeriksa izin dan akses pada halaman yang kamu bangun.
