Css Indexing

Setelah kamu belajar cara menggeser elemen dengan positioning, masalah baru biasanya muncul elemen-elemen tersebut mulai saling bertumpuk. z-index adalah properti yang menentukan urutan tumpukan elemen tersebut di sumbu Z (kedalaman layar).

1. Penjelasan Singkat

Bayangkan layar monitor kamu adalah sebuah meja, dan elemen HTML adalah lembaran kertas. Secara default, kertas yang diletakkan terakhir (paling bawah di kode HTML) akan berada di atas kertas lainnya.

Dengan z-index, kamu bisa mengatur siapa yang harus di depan dan siapa yang harus di belakang menggunakan angka:

• Angka positif lebih besar (misal: 10) akan berada di depan angka yang lebih kecil (misal: 1).
• Angka negatif (misal: -1) akan berada di belakang elemen default.

2. Sintaksis & Properti

Penggunaan z-index sangat sederhana, namun butuh ketelitian pada konteks tumpukannya (stacking context).

.background-layer {
  position: absolute;
  z-index: -1; /* Berada di belakang teks normal */
}

.header {
  position: fixed;
  top: 0;
  z-index: 100; /* Pastikan selalu di paling depan saat di-scroll */
}

.modal-popup {
  position: fixed;
  z-index: 999; /* Angka tinggi untuk elemen yang harus menutupi segalanya */
}

3. Studi Kasus: Membuat Modal dengan Overlay (Layar Hitam Transparan)

Saat kamu membuat pop-up (modal), kamu butuh lapisan hitam transparan di belakangnya untuk menutupi konten utama, tapi modalnya sendiri harus berada di depan lapisan hitam tersebut.

<div class="main-content">
  <h1>Konten Web Kamu</h1>
  <p>Selamat membaca artikel ini...</p>
</div>

<div class="overlay"></div>

<div class="modal">
  <h2>Halo!</h2>
  <p>Ini adalah pesan penting.</p>
  <button>Tutup</button>
</div>

/* Lapisan transparan yang menutupi seluruh layar */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10; /* Berada di tengah-tengah */
}

/* Kotak Modal harus lebih depan dari overlay */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  z-index: 20; /* Lebih tinggi dari 10, jadi dia di depan */
  border-radius: 8px;
}

4. Best Practice

• Gunakan Skala yang Teratur: Jangan langsung gunakan z-index: 999999. Sebaiknya buat standar, misal: elemen dasar (1), navigasi (10), overlay (20), modal (30). Ini memudahkan maintenance.
• Pahami Stacking Context: Terkadang z-index tinggi tidak berfungsi karena elemen parent-nya memiliki z-index yang lebih rendah dibandingkan elemen lain di luar grupnya. Ingat: anak tidak bisa "keluar" lebih depan jika orang tuanya sudah "dikunci" di belakang.
• Hindari Overuse: Gunakan hanya saat benar-benar ada elemen yang bertumpuk secara tidak sengaja atau untuk UI khusus seperti header dan modal.