Belajar CSS Z-Index dan Layering Elemen

Dalam dunia pengembangan web, pengaturan urutan tampilan elemen sangat penting untuk menciptakan desain yang rapi dan profesional. Kamu pasti pernah melihat situasi di mana satu elemen menutupi elemen lain di halaman web. Nah, inilah saatnya kamu memahami konsep CSS z-index dan layering elemen.

Z-index di CSS menentukan urutan tumpukan (stacking order) elemen pada sumbu Z (kedalaman). Artinya, elemen dengan nilai z-index lebih tinggi akan berada di depan elemen lain yang nilainya lebih rendah.

Artikel ini akan menjadi panduan lengkap CSS z-index, membahas dari dasar hingga konsep lanjutan seperti stacking context, positioning, dan cara debug z-index yang tidak bekerja. Mari mulai belajar!

Baca juga: Cara Mengatur Overflow dan Visibility di CSS

Apa Itu CSS Z-Index?

z-index CSS adalah properti yang digunakan untuk menentukan posisi tumpukan (lapisan) elemen ketika elemen-elemen tersebut saling tumpang tindih.

.box1 {
    position: absolute;
    z-index: 1;
}

.box2 {
    position: absolute;
    z-index: 10;
}Code language: CSS (css)

Elemen dengan z-index: 10 akan ditampilkan di atas elemen dengan z-index: 1.

Syarat Z-Index Berfungsi

Banyak pemula yang bingung karena menambahkan z-index tidak berpengaruh. Penyebab utamanya adalah elemen tidak memiliki positioning.

z-index hanya berfungsi jika elemen memiliki salah satu properti position berikut:

• position: absolute
• position: fixed
• position: sticky
• position: relative

Jika kamu hanya menggunakan position: static; (default), maka z-index tidak akan berpengaruh.

.card {
    position: relative;
    z-index: 5;
}Code language: CSS (css)

Konsep Layering CSS (Tumpukan Elemen)

Bayangkan halaman web seperti tumpukan kertas transparan. Masing-masing elemen bisa berada di lapisan berbeda, tergantung nilai z-index.

Urutan layering CSS secara default (tanpa z-index) adalah:

1. Elemen background.
2. Elemen inline dan block normal.
3. Elemen posisi relative/absolute.
4. Elemen dengan z-index lebih tinggi.

Stacking Context CSS

Salah satu konsep penting dalam CSS layering adalah stacking context. Ini menentukan ruang di mana elemen-elemen diatur dalam urutan tumpukan mereka.

Kapan Stacking Context Terbentuk?

Stacking context baru terbentuk jika:

• Elemen memiliki position selain static dan z-index bukan auto.
• Elemen memiliki opacity kurang dari 1.
• Elemen memiliki transform, filter, atau perspective.
• Elemen dengan isolation: isolate.
• Elemen dengan will-change atau mix-blend-mode.

Contoh:

.parent {
    position: relative;
    z-index: 10;
}
.child {
    position: absolute;
    z-index: 100;
}Code language: CSS (css)

Di sini, .child hanya akan dibandingkan dengan elemen dalam konteks .parent, bukan seluruh halaman.

Contoh Penggunaan Z-Index CSS

Kasus 1: Tooltip di Atas Gambar

<div class="container">
    <img src="gambar.jpg" alt="Foto" class="img">
    <div class="tooltip">Ini tooltip!</div>
</div>Code language: JavaScript (javascript)

.container {
    position: relative;
}

.img {
    position: relative;
    z-index: 1;
}

.tooltip {
    position: absolute;
    z-index: 10;
    background: #000;
    color: #fff;
    padding: 5px;
}Code language: CSS (css)

Hasilnya: Tooltip akan muncul di atas gambar karena z-index lebih besar.

Perbedaan Z-Index dan Position CSS

Properti	Fungsi	Keterangan
position	Menentukan posisi elemen	Harus digunakan agar z-index aktif
z-index	Menentukan urutan tumpukan	Hanya bekerja pada elemen berposisi non-static

z-index Tidak Bekerja? Ini Penyebabnya

Beberapa penyebab umum:

• Elemen tidak memiliki position.
• Elemen berada dalam stacking context lain.
• Elemen menggunakan opacity, transform, atau filter.
• Elemen anak tidak bisa melewati batas konteks induknya.

Solusi:

• Gunakan position: relative; atau absolute;.
• Hindari membuat stacking context tidak perlu.
• Periksa elemen induk dengan dev tools.

z-index Negatif dan auto

Kamu bisa menggunakan nilai negatif atau auto pada z-index.

Contoh z-index: -1

Elemen akan berada di bawah elemen lain:

.bg {
    position: absolute;
    z-index: -1;
}Code language: CSS (css)

Contoh z-index: auto

Nilai default, mengikuti konteks tumpukan induk.

z-index dengan transform

Ketika elemen memiliki transform, misalnya transform: translateX(10px), maka ia akan membentuk stacking context baru.

Akibatnya, elemen anak di dalamnya tidak bisa menimpa elemen luar, meskipun z-index lebih besar.

Layering dalam CSS 3D

Pada desain 3D CSS (misalnya dengan transform: rotateY(45deg)), layering menjadi lebih kompleks karena melibatkan perspektif dan kedalaman ruang (3D stacking).

Namun, prinsip utamanya tetap sama: nilai z-index menentukan elemen mana yang tampil di depan.

z-index pada Modal, Popup, dan Menu Dropdown

Masalah umum pada UI modern adalah elemen modal atau dropdown tertutup oleh elemen lain. Solusinya:

.modal {
    position: fixed;
    z-index: 9999;
}Code language: CSS (css)

Atau untuk dropdown:

.dropdown-menu {
    position: absolute;
    z-index: 1000;
}Code language: CSS (css)

Gunakan sistem skala z-index seperti:

• Base layer: z-index: 1–10
• Header/Footer: z-index: 100
• Modal: z-index: 1000
• Overlay: z-index: 9999

Debug Z-Index

Gunakan DevTools (Chrome atau Firefox):

1. Klik kanan → Inspect.
2. Pilih elemen yang tertutup.
3. Lihat nilai position dan z-index.
4. Periksa apakah ada stacking context induk.

CSS Layer Management (Manajemen Lapisan)

Gunakan sistem z-index yang konsisten agar tidak membingungkan.

Contoh konvensi:

:root {
    --z-index-base: 1;
    --z-index-header: 100;
    --z-index-modal: 1000;
    --z-index-tooltip: 2000;
}Code language: CSS (css)

Kemudian panggil:

.modal {
    z-index: var(--z-index-modal);
}Code language: CSS (css)

visibility vs z-index CSS

Kadang kamu ingin menyembunyikan elemen tanpa mengubah urutan layer. Di sinilah visibility digunakan.

Properti	Fungsi	Perbedaan
visibility: hidden;	Menyembunyikan elemen tapi tetap mempertahankan ruangnya	Ruang masih ada
display: none;	Menyembunyikan dan menghapus ruang elemen	Tidak menempati ruang

Kesimpulan

Belajar CSS z-index dan layering elemen sangat penting untuk mengatur tampilan visual situs web. Dengan memahami stacking context, kamu bisa menghindari banyak masalah seperti tooltip tertutup, modal tidak muncul, atau elemen yang “menghilang”.

Ringkasan:

• z-index menentukan urutan tumpukan elemen.
• Harus digunakan bersama position non-static.
• Stacking context membatasi ruang perbandingan z-index.
• Gunakan sistem z-index terstruktur untuk proyek besar.