Lompat ke konten
Aback Tools Logo

Visualisator z-index

Visualisasikan konteks tumpukan CSS dan lapisan z-index untuk elemen HTML secara online dan gratis. Tambah lapisan, atur nilai z-index dan properti posisinya, alihkan konteks tumpukan, dan lihat persis bagaimana elemen bertumpuk satu di atas yang lain dalam diagram langsung. Debug konflik z-index dan pahami konteks tumpukan seketika. Tanpa pendaftaran.

Z-Index Visualizer

Add layers, set their z-index, position, and opacity. The visualization shows how elements stack on top of each other. Layers with isolation: isolate create new stacking contexts. All processing runs locally in your browser.

Stacking Visualization

Higher z-index = on top
Base Card
z: 1
Dropdown Menu
z: 100
Modal Overlay
z: 1000
Tooltip
z: 9999
Stacking Order (bottom → top)
1
Base Cardz: 1relative
2
Dropdown Menuz: 100absolutectx
3
Modal Overlayz: 1000fixedctx
4
Tooltipz: 9999absolute

Layers(4 total)

Generated CSS

.base-card {
  position: relative;
  z-index: 1;
  opacity: 0.85;
}

.dropdown-menu {
  position: absolute;
  z-index: 100;
  opacity: 0.9;
  /* Creates new stacking context */
  isolation: isolate;
}

.modal-overlay {
  position: fixed;
  z-index: 1000;
  opacity: 0.8;
  /* Creates new stacking context */
  isolation: isolate;
}

.tooltip {
  position: absolute;
  z-index: 9999;
  opacity: 0.95;
}
How to read the visualization
White dot on layer: Layer creates a new stacking context (isolation: isolate)
ctx badge: Layer has its own stacking context - child z-indexes are scoped to it
z-index only works on positioned elements (not static)
Stacking context is created by: position + z-index, opacity < 1, transform, filter, isolation

Mengapa menggunakan visualisator z-index kami?

  • Visualisasi tumpukan z-index langsung: visualisator z-index kami menggambar diagram tumpukan langsung yang diperbarui seketika saat Anda menambah, mengedit, atau menyusun ulang lapisan. Lihat persis bagaimana elemen bertumpuk berdasarkan nilai z-index dan properti posisinya.
  • Deteksi konteks tumpukan: visualisator z-index kami menyorot lapisan yang membuat konteks tumpukan baru. Centang kotak «Konteks tumpukan baru» untuk melihat bagaimana isolasi membatasi nilai z-index anak - penyebab paling umum bug z-index.
  • Visualisator z-index online yang aman: seluruh visualisasi z-index berjalan sepenuhnya di browser Anda - tidak ada data yang dikirim ke server mana pun. Konfigurasi lapisan Anda tidak pernah meninggalkan perangkat. Gunakan visualisator z-index kami dengan aman untuk proyek klien dan desain UI milik sendiri.
  • Visualisator z-index tanpa instalasi, 100% gratis: gunakan visualisator z-index kami langsung di browser apa pun tanpa unduhan, akun, atau iklan. Menghasilkan CSS siap produksi dengan deklarasi z-index dan position untuk semua lapisan Anda - sepenuhnya gratis selamanya.

Kasus penggunaan umum visualisator z-index

  • Debug konflik z-index: pengembang memakai visualisator z-index kami untuk men-debug elemen UI yang tiba-tiba muncul di belakang elemen lain. Tambah lapisan Anda, atur nilainya, dan langsung lihat mengapa sebuah elemen tersembunyi di belakang elemen lain.
  • Memahami konteks tumpukan: gunakan visualisator z-index kami untuk memahami bagaimana konteks tumpukan membatasi nilai z-index. Opsi «Konteks tumpukan baru» menunjukkan bagaimana induk dengan opacity < 1 atau transform dapat menjebak elemen anak apa pun nilai z-index-nya.
  • Arsitektur modal dan overlay: pengembang frontend memakai visualisator z-index kami untuk merencanakan hierarki z-index modal, overlay, tooltip, dan dropdown. Visualisasikan seluruh tumpukan sebelum menulis satu baris CSS pun.
  • Token z-index sistem desain: tim sistem desain memakai visualisator z-index kami untuk mendefinisikan dan mendokumentasikan token z-index. Visualisasikan hierarki lengkap - dasar, dropdown, lengket, modal, toast, tooltip - lalu ekspor CSS-nya.
  • Mengajarkan penumpukan CSS: pengajar dan pengembang yang mempelajari CSS memakai visualisator z-index kami untuk memahami bagaimana z-index, position, dan konteks tumpukan saling berinteraksi. Visualisasi langsung membuat konsep abstrak langsung terasa nyata.
  • Merencanakan pustaka komponen: gunakan visualisator z-index kami untuk merencanakan urutan tumpukan pustaka komponen. Pastikan tooltip selalu muncul di atas modal dan header lengket tidak pernah menutupi menu dropdown.

Apa itu visualisator z-index?

Visualisator z-index adalah alat yang menggambar diagram visual tentang bagaimana elemen HTML bertumpuk berdasarkan properti CSS z-index dan position-nya. Dalam CSS, elemen dengan nilai z-index lebih tinggi tampil di depan elemen dengan nilai lebih rendah - tetapi hanya jika keduanya berada dalam konteks tumpukan yang sama . Visualisator z-index kami memungkinkan Anda menambah lapisan, mengatur nilai z-index dan position-nya, mengalihkan konteks tumpukan, dan melihat urutan tumpukan yang tepat dalam diagram langsung - sehingga memudahkan memahami dan men-debug masalah lapisan yang rumit.

Cara kerja visualisator z-index kami

  1. Tambah lapisan Anda: klik «Tambah Lapisan» untuk membuat elemen baru. Atur nama, nilai z-index, properti CSS position, warna, dan opasitasnya. Alihkan visibilitas untuk menampilkan atau menyembunyikan lapisan di visualisasi tanpa menghapusnya.
  2. Visualisasikan tumpukan: diagram diperbarui seketika saat Anda mengedit lapisan mana pun. Lapisan ditampilkan bertumpuk dari bawah (z-index terendah) ke atas (z-index tertinggi). Lapisan dengan konteks tumpukan baru ditandai titik putih dan lencana «ctx» di daftar urutan.
  3. Salin CSS-nya: panel CSS yang dihasilkan menampilkan deklarasi z-index dan position lengkap untuk semua lapisan Anda. Salin dengan satu klik dan tempelkan ke stylesheet Anda.

Konsep penting z-index

  • z-index hanya berfungsi pada elemen yang diposisikan: mengatur z-index pada elemen dengan position: static (nilai bawaan) tidak berpengaruh. Anda harus memakai relative , absolute , fixed , atau sticky .
  • Konteks tumpukan membatasi z-index: konteks tumpukan adalah grup lapisan mandiri. Nilai z-index di dalamnya hanya bersaing dengan elemen lain di konteks yang sama - bukan dengan elemen di luarnya. Inilah sebabnya z-index 9999 di dalam modal masih bisa muncul di belakang tooltip di luar modal.
  • Apa yang membuat konteks tumpukan: elemen akar, elemen mana pun dengan position dan z-index selain auto, opacity < 1 , transform , filter , isolation: isolate , dan beberapa properti CSS lain.
  • Bug z-index paling umum: elemen induk dengan opacity < 1 atau transform membuat konteks tumpukan baru dan menjebak semua elemen anak di dalamnya - tidak peduli seberapa tinggi nilai z-index-nya.

Pertanyaan yang Sering Diajukan

Visualisator z-index menampilkan diagram langsung tentang bagaimana elemen HTML bertumpuk berdasarkan properti CSS z-index dan position-nya. Visualisator z-index kami memungkinkan Anda menambah lapisan, mengatur nilai z-index, mengalihkan konteks tumpukan, dan melihat urutan tumpukan yang tepat seketika.

Alasan paling umum: 1) Elemen memiliki position: static (z-index hanya berfungsi pada elemen yang diposisikan). 2) Elemen induk membuat konteks tumpukan baru karena opacity < 1, transform, atau filter, sehingga elemen terjebak di dalamnya.

Konteks tumpukan adalah grup lapisan mandiri dalam CSS. Nilai z-index di dalam sebuah konteks tumpukan hanya bersaing dengan elemen lain di konteks yang sama - bukan dengan elemen di luarnya.

Ya. Seluruh visualisasi z-index berjalan sepenuhnya di browser Anda - konfigurasi lapisan Anda tidak pernah meninggalkan perangkat.

Ya, visualisator z-index kami 100% gratis tanpa pendaftaran, tanpa akun, tanpa batas penggunaan, dan tanpa iklan.

Konteks tumpukan baru dibuat oleh: position dengan z-index selain auto, opacity < 1, transform, filter, isolation: isolate, will-change, mix-blend-mode, clip-path, dan mask.

Konvensi umum: konten dasar (1), header lengket (100), dropdown (200), tooltip (300), modal (1000), notifikasi (9000). Memakai kelipatan 100 memudahkan menyisipkan lapisan baru tanpa konflik.

Tidak. z-index hanya berfungsi pada elemen yang diposisikan - yaitu yang memiliki position: relative, absolute, fixed, atau sticky. Mengatur z-index pada elemen statis tidak berpengaruh.