Z-Index CSS: Mengatur Tumpukan Elemen

Mei 20, 2025

Apa Itu z-index dalam CSS?

Dalam dunia pengembangan web, selain mengatur posisi elemen secara horizontal (x) dan vertikal (y), kita juga bisa mengatur tata letak secara kedalaman (z-axis) — yaitu apakah suatu elemen muncul di atas atau di bawah elemen lain.

Properti z-index digunakan untuk mengontrol urutan tumpukan elemen yang tumpang tindih satu sama lain. Semakin tinggi nilai z-index, semakin dekat ke "atas" elemen tersebut terlihat oleh pengguna.

1. Bagaimana Cara Kerja z-index?

z-index hanya bekerja pada elemen yang memiliki properti position dengan nilai selain static — seperti relative, absolute, fixed, atau sticky.

Contoh dasar:

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

.elem2 {
    position: absolute;
    z-index: 2;
}

Elemen dengan z-index: 2 akan muncul di atas elemen dengan z-index: 1.

💡 z-index tidak berpengaruh pada elemen dengan position: static;.

2. Sintaks Dasar

selector {
    position: relative | absolute | fixed | sticky;
    z-index: angka;
}

Contoh:

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

Nilai z-index bisa berupa:

Angka positif (1, 10, 999)
Nol (0)
Angka negatif (-1, -10)

3. Ruang Lingkup z-index dan Stacking Context

z-index tidak bekerja secara global, tetapi relatif terhadap konteks tumpukan (stacking context). Artinya, jika dua elemen berada dalam konteks stacking yang berbeda (misalnya, masing-masing berada dalam container berbeda), maka z-index mereka tidak saling memengaruhi.

Contoh:

<div class="container1">
    <div class="box red" style="z-index: 100;">Merah</div>
</div>

<div class="container2">
    <div class="box blue" style="z-index: 1;">Biru</div>
</div>

Jika .container1 dan .container2 membentuk stacking context berbeda, maka elemen merah tidak otomatis muncul di atas biru, meskipun nilainya lebih besar.

💡 Jadi, saat menggunakan z-index, penting memahami bagaimana stacking context dibuat dan dikelola.

4. Urutan Default Tumpukan Elemen

Tanpa z-index, browser menggunakan aturan default untuk menampilkan elemen:

Urutan dari bawah ke atas:

Background dan border dari root.
Elemen dengan position: static sesuai urutan penulisan HTML.
Elemen dengan position: relative, absolute, atau fixed tanpa z-index.
Elemen dengan z-index rendah ke tinggi.

5. Contoh Penggunaan Umum z-index

a. Modal atau Pop-up

Untuk modal atau pop-up, gunakan z-index tinggi agar muncul di atas semua elemen lain.

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    z-index: 1000;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

HTML:

<div class="overlay"></div>
<div class="modal">Ini adalah modal</div>

b. Navbar Tetap di Atas Konten

Agar navbar tetap terlihat di atas konten saat scroll, tambahkan z-index:

nav {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    color: white;
    z-index: 999;
}

c. Tooltip atau Dropdown Menu

Gunakan z-index agar tooltip atau dropdown tidak tertutup oleh elemen lain:

.tooltip {
    position: absolute;
    background-color: black;
    color: white;
    padding: 5px 10px;
    z-index: 200;
}

6. Menghindari Masalah Umum z-index

❌ Masalah: Elemen dengan z-index tinggi masih tertutup

Penyebab umum:

Kedua elemen berada dalam stacking context yang berbeda
Elemen induk memiliki overflow, filter, atau transform yang membuat stacking context baru

Solusi:

Pastikan elemen yang ingin ditampilkan berada dalam satu stacking context yang sama
Gunakan nilai z-index yang cukup tinggi dan konsisten

✅ Tips Menyusun z-index Secara Efektif

Gunakan skala bertahap, misalnya:

--z-index-low: 100;
--z-index-medium: 500;
--z-index-high: 1000;

Simpan nilai-nilai ini dalam variabel CSS untuk kemudahan pemeliharaan:

:root {
    --z-base: 1;
    --z-header: 100;
    --z-modal: 1000;
}

nav {
    z-index: var(--z-header);
}

Hindari menetapkan z-index terlalu tinggi secara acak, seperti 999999. Ini bisa menyebabkan konflik dan susah dikelola.

7. Contoh Praktis

a. Navbar + Modal

HTML

<nav class="navbar">Navbar</nav>
<main class="content">Konten utama...</main>
<div class="modal">Modal Login</div>

CSS

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #333;
    color: white;
    padding: 15px;
    z-index: 999;
}

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

8. Tips dan Trik Efektif

Gunakan z-index hanya ketika benar-benar diperlukan.
Buat sistem z-index menggunakan variabel CSS untuk konsistensi.
Uji tampilan elemen di berbagai ukuran layar dan perangkat.
Gunakan developer tools browser untuk melihat hierarki tumpukan elemen.
Periksa apakah ada transform, filter, atau opacity yang memicu stacking context baru.

9. Kesimpulan

Properti z-index adalah alat penting dalam CSS untuk mengatur urutan tumpukan elemen di halaman web. Dengan memahami cara kerjanya dan hubungannya dengan stacking context, Anda bisa membuat antarmuka web yang rapi, interaktif, dan tidak tumpang tindih secara tidak diinginkan.

Selanjutnya, kita akan membahas Specificity CSS, yaitu cara memahami prioritas selector saat gaya bertentangan.

💡 Tips Praktis

Gunakan z-index bersama position selain static.
Buat sistem z-index menggunakan variabel CSS untuk manajemen yang lebih baik.
Hindari menetapkan z-index terlalu tinggi tanpa pertimbangan.
Uji tampilan elemen di berbagai perangkat dan browser.

Layout dan Posisi

Written by Kelvin Y.