0Pricing
CSS Academy · Pelajaran

Z-Index dan Konteks Tumpukan

Kontrol elemen yang tampil di atas menggunakan z-index dan pahami konteks tumpukan.

Z-Index dan Konteks Tumpukan adalah pelajaran CSS Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus CSS Academy mencakup 4 pelajaran total.

Apa itu z-index?

z-index mengontrol urutan penumpukan elemen yang diposisikan di sepanjang sumbu Z (dari depan ke belakang). Nilai yang lebih tinggi tampil di atas nilai yang lebih rendah saat elemen saling tumpang tindih.

z-index Hanya Berfungsi pada Elemen yang Diposisikan

z-index tidak berpengaruh pada elemen dengan position: static (nilai bawaan). Anda harus menggunakan relative, absolute, fixed, atau sticky agar z-index diterapkan.

<div class="popup">Popup (position + z-index)</div>

Urutan Penumpukan Bawaan

Tanpa z-index yang ditentukan secara eksplisit, elemen ditumpuk dalam urutan berikut (dari belakang ke depan):

  1. Latar belakang elemen akar
  2. Elemen tingkat blok (sesuai urutan aliran)
  3. Elemen yang diapungkan
  4. Elemen sebaris
  5. Elemen yang diposisikan dengan z-index: auto atau 0

Konteks Penumpukan

Konteks penumpukan adalah lapisan elemen dengan sumbu-z yang sama. Nilai z-index hanya bersaing dalam konteks penumpukan yang sama. Elemen di dalam suatu konteks penumpukan tidak dapat ditempatkan di atas elemen di luarnya, terlepas dari nilai z-index-nya.

Apa yang Membuat Konteks Penumpukan?

Konteks penumpukan baru dibuat oleh:

  • position + z-index selain auto
  • opacity kurang dari 1
  • transform, filter, dan perspective yang diterapkan
  • will-change pada properti tertentu
  • isolation: isolate
  • Anak flex/grid dengan z-index

Isolasi Konteks Penumpukan

Gunakan isolation: isolate untuk membuat konteks penumpukan secara sengaja tanpa efek visual apa pun. Ini berguna untuk komponen UI yang perlu menampung lapisan z-index-nya sendiri.

<div class="modal-wrapper">Isolated stacking context</div>

Masalah Skala z-index

Proyek sering mengalami "perang z-index", ketika para pengembang saling bersaing dengan menaikkan nilai hingga 9999 atau 99999. Atasi masalah ini dengan skala z-index bernama menggunakan variabel CSS:

<p>Custom properties define a z-index scale used across the app.</p>

z-index Negatif

Nilai z-index negatif menempatkan elemen di belakang latar belakang blok pembungkusnya. Ini dapat digunakan untuk lapisan elemen semu dekoratif yang ditempatkan di belakang konten.

<div class="card">Card with a decorative gradient layer behind it</div>

Menelusuri Masalah Penumpukan

Ketika modal atau tooltip muncul di belakang elemen lain, penyebabnya biasanya adalah konteks penumpukan pada leluhur dengan z-index rendah. Gunakan Tampilan 3D DevTools atau periksa opacity, transform, dan filter pada elemen induk.

z-index dalam Flex dan Grid

Item flex dan grid dapat langsung menggunakan z-index tanpa menetapkan position secara eksplisit. Peramban memperlakukannya sebagai elemen yang diposisikan untuk keperluan penumpukan.

<div class="grid"><div class="grid-item demo-hover">1</div><div class="grid-item">2</div><div class="grid-item">3</div></div>

Modal Tetap dan z-index

Modal sebaiknya menjadi anak langsung dari <body> (atau pembungkus tingkat atas) agar dapat keluar dari konteks penumpukan leluhur. Elemen HTML <dialog> menangani hal ini secara bawaan di lapisan teratas peramban.

Pemeriksaan Singkat

Dua elemen yang saling tumpang tindih sama-sama memiliki z-index: 100 dalam konteks penumpukan induk yang berbeda. Apa yang menentukan elemen mana yang tampil di atas?

Rangkuman

z-index mengatur penumpukan elemen yang diposisikan dari depan ke belakang. Konteks penumpukan mengisolasi persaingan z-index. Apa pun yang membuat konteks penumpukan pada induk dapat menjebak nilai z-index anaknya. Gunakan isolation: isolate untuk membuat batas yang jelas dan variabel CSS untuk skala z-index.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Z-Index dan Konteks Tumpukan” gratis?

Ya — teks lengkap “Z-Index dan Konteks Tumpukan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus CSS Academy, upgrade ke CoddyKit PRO. Kursus CSS Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Z-Index dan Konteks Tumpukan”?

Kontrol elemen yang tampil di atas menggunakan z-index dan pahami konteks tumpukan. Kamu berlatih CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai CSS Academy?

Tidak diperlukan pengalaman sebelumnya. CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Z-Index dan Konteks Tumpukan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Pemosisian Statis dan Relatif
  2. Pemosisian Absolut dan Blok Pembungkus
  3. Pemosisian Tetap dan Melekat
  4. Z-Index dan Konteks Tumpukan
← Kembali ke CSS Academy