Z-Index: Ketika Semua Elemen Merasa Paling Penting

Bagi sebagian orang, z-index hanyalah sebuah angka kecil dalam CSS namun bagi para web developer yang pernah begadang mencari penyebab tombol tidak bisa diklik, widget tertutup, atau menu menghilang di balik elemen lain, z-index adalah sesuatu yang jauh lebih serius.

Bahkan bisa dibilang, z-index adalah sumber dari banyak drama yang terjadi di dalam sebuah rumah website.

Apa Itu Z-Index?

Secara sederhana, z-index adalah aturan yang menentukan siapa yang berhak tampil di lapisan paling atas ketika beberapa elemen saling bertumpuk. Bayangkan sebuah panggung pertunjukan .

• Ada penyanyi.
• Ada pemain gitar.
• Ada penonton.
• Ada petugas keamanan.

Semua berada di tempat yang berbeda sehingga tidak saling menghalangi.

Namun dalam website, beberapa elemen sering berada pada posisi yang sama ketika itu terjadi, browser harus menentukan siapa yang tampil di depan dan siapa yang berada di belakang, si sinilah z-index bekerja.

Semakin tinggi nilainya, semakin besar peluang sebuah elemen tampil di atas elemen lainnya.

Awalnya Terlihat Sederhana

Pada awal belajar CSS, banyak orang berpikir : "Ah, cuma angka." setelah itu mulailah kehidupan seorang developer berubah.

Hierarki Kekuasaan

Biasanya perjalanan dimulai seperti ini.

z-index: 1; "Saya cukup penting."

Kemudian muncul elemen lain.

z-index: 10; "Saya lebih penting."

Lalu datang popup.

z-index: 100; "Mohon minggir semuanya."

Kemudian hadir widget.

z-index: 1000; "Saya harus terlihat setiap saat."

Lalu muncul floating WhatsApp.

z-index: 9999; "Saya raja di halaman ini."

Dan pada titik tertentu, seorang developer yang sudah lelah mulai menulis:

z-index: 99999;

Karena merasa angka yang lebih besar pasti menyelesaikan masalah, padahal sering kali masalahnya bukan pada besar angkanya.

Kisah Nyata dari Medan Perang

Suatu hari sebuah menu tidak bisa diklik padahal tampilannya terlihat normal, tidak ada pesan error, tidak ada peringatan, tidak ada tanda-tanda bahaya dan Investigasi pun dimulai.

• HTML diperiksa.
• JavaScript diperiksa.
• Cache dibersihkan.
• Browser diuji ulang.
• Server sempat dicurigai.
• Cloudflare bahkan sempat masuk daftar tersangka.

Namun setelah berjam-jam mencari, penyebab sebenarnya ditemukan, ternyata ada sebuah elemen transparan yang berada tepat di atas menu.

• Elemen tersebut tidak terlihat.
• Tidak memiliki warna.
• Tidak memiliki teks.
• Tidak memiliki tujuan hidup yang jelas.
• Tetapi memiliki z-index lebih tinggi.

Akibatnya semua klik pengguna ditangkap oleh elemen tersebut, menu terlihat normal namun tidak bisa digunakan. Dan seperti biasa, setelah masalah ditemukan, hanya ada satu kalimat yang terdengar: "Sompret... ternyata cuma angka z-index itu 🤣☕🔧"

Ketika Semua Ingin Menjadi Raja

Masalah terbesar muncul ketika banyak elemen merasa dirinya paling penting.

• Menu ingin tampil paling atas.
• Popup ingin tampil paling atas.
• Widget ingin tampil paling atas.
• Notifikasi ingin tampil paling atas.
• Floating button ingin tampil paling atas.
• Overlay juga ingin tampil paling atas.

Akhirnya seluruh halaman berubah menjadi arena perebutan kekuasaan, masing-masing elemen berlomba menaikkan z-index seperti peserta lelang, semakin lama angkanya semakin tidak masuk akal dan tidak jarang ditemukan kode seperti:

z-index: 9999999;

Pada titik ini biasanya developer sudah tidak sedang memperbaiki masalah malah mereka sedang bernegosiasi dengan takdir 😂

Kesalahan yang Sering Terjadi

Banyak orang mengira z-index selalu bekerja padahal kenyataannya tidak.

Jika sebuah elemen tidak memiliki posisi yang sesuai seperti:

• relative
• absolute
• fixed
• sticky

maka z-index sering kali tidak memberikan hasil yang diharapkan. Inilah alasan mengapa banyak developer menghabiskan waktu berjam-jam menaikkan angka z-index tanpa perubahan apa pun, bukan karena browser membangkang melainkan karena aturan CSS memang bekerja seperti itu.

Pelajaran Penting

Daripada terus menaikkan angka z-index, lebih baik memahami struktur halaman terlebih dahulu.

• Periksa posisi elemen.
• Periksa parent container.
• Periksa overlay yang mungkin tidak terlihat.
• Periksa apakah ada elemen transparan yang diam-diam menutupi area lain.

Karena dalam banyak kasus, penyebab sebenarnya bukanlah angka yang terlalu kecil.

Melainkan elemen yang berada di tempat yang salah.

Penutup

Z-index adalah salah satu fitur CSS yang sangat berguna namun di tangan yang kurang hati-hati, ia bisa menjadi sumber kebingungan yang luar biasa.

Jangan langsung menulis z-index 99999 setiap kali menemukan masalah, luangkan waktu untuk memahami mengapa elemen tersebut berada di lapisan tertentu, karena dalam dunia website, tidak semua elemen bisa menjadi raja.

Dan ketika semuanya ingin berada di posisi paling atas, biasanya yang terjadi bukan keteraturan melainkan perang saudara antar elemen HTML.

Jika suatu hari Anda menemukan tombol yang tidak bisa diklik, widget yang tertutup, atau menu yang tiba-tiba menghilang di balik elemen lain, jangan panik kemungkinan besar bukan server yang rusak, bukan browser yang bermasalah, dan bukan pula internet yang sedang gangguan. Bisa jadi hanya ada satu z-index yang sedang duduk santai di atas semuanya sambil berkata : "Saya duluan di sini 😂"