Ungkapkan urutan tumpukan lengkap setiap elemen.
Ungkapkan urutan tumpukan lengkap setiap elemen. Alat ini membantu Anda mendiagnosis masalah tumpukan elemen yang kompleks dengan memvisualisasikan lapisan z-index dan mengidentifikasi konteks tumpukan (stacking context) yang tersembunyi.
Setiap elemen dengan nilai z-index mendapatkan overlay berwarna semi-transparan dan lencana label yang menunjukkan angka z-index-nya. Nilai z-index yang lebih tinggi mendapatkan warna yang lebih hangat (merah), nilai yang lebih rendah mendapatkan warna yang lebih dingin (biru). Pelapisan visual ini membuat urutan tumpukan menjadi intuitif secara instan.
Panel samping menampilkan daftar semua nilai z-index yang ditemukan di halaman, diurutkan dari yang tertinggi (atas) ke terendah (bawah). Setiap entri menunjukkan nilai z-index, selektor CSS atau nama class, dan properti posisi. Klik entri mana pun untuk menyorot elemen terkait di halaman.
Mengidentifikasi setiap batas stacking context di halaman dan properti CSS yang membuatnya — seperti position: relative/absolute dengan z-index, transform, opacity < 1, filter, will-change, isolation: isolate, atau contain: layout. Ini dicantumkan secara terpisah sehingga Anda dapat melacak mengapa nilai z-index tidak berfungsi sebagaimana mestinya.
Klik lapisan mana pun di panel untuk menyorot dan menggulir ke elemen terkait di halaman. Atau klik elemen apa pun yang disorot di halaman untuk menemukannya di panel peta lapisan. Navigasikan urutan tumpukan ke arah mana pun yang menurut Anda nyaman.
Setiap entri lapisan menunjukkan nilai posisi CSS elemen (static, relative, absolute, fixed, sticky) karena z-index hanya berlaku untuk elemen yang memiliki posisi. Temukan kasus di mana z-index diatur tetapi posisinya static — bug umum di mana z-index tidak memberikan efek apa pun.
Untuk elemen apa pun yang dipilih, lihat rantai lengkap stacking context leluhurnya hingga ke root. Pahami persis konteks tumpukan leluhur mana yang membatasi cakupan z-index elemen tersebut — kunci utama untuk sebagian besar debugging z-index.
Sebuah modal dengan z-index: 9999 tersembunyi di belakang sidebar dengan z-index: 10. Mengapa? Pemeriksa Z-Index menunjukkan bahwa induk modal memiliki position: relative dan membuat stacking context dengan z-index: 1, sementara induk sidebar memiliki z-index: 2. Modal tersebut tidak akan pernah bisa keluar dari konteks induknya.
Menu dropdown menghilang di belakang bagian berikutnya saat dibuka. Pemeriksa mengungkapkan bahwa kontainer menu memiliki overflow: hidden (yang juga membuat konteks tumpukan) atau bagian berikutnya memiliki z-index yang lebih tinggi. Sorotan lapisan visual membuat tumpang tindih ini terlihat jelas.
Seiring waktu, nilai z-index menumpuk secara berlebihan: 10, 100, 999, 9999, 99999. Peta lapisan menunjukkan semua nilai yang diurutkan, memudahkan Anda mengidentifikasi rentang aktual yang dibutuhkan dan menyederhanakannya ke skala yang bersih (1, 2, 3, 10, 100).
Widget obrolan, banner cookie, dan overlay analitik menyisipkan elemen dengan nilai z-index tinggi. Pemeriksa Z-Index menunjukkan dengan tepat nilai yang mereka gunakan, membantu Anda mengatur nilai z-index Anda sendiri secara tepat untuk menghindari konflik.
Tinjau semua stacking context di halaman untuk memeriksa yang tidak perlu. Transform, filter, dan opacity yang diterapkan untuk efek visual mungkin secara tidak sengaja membuat konteks tumpukan yang menyebabkan masalah z-index di tempat lain. Daftar konteks membuat semuanya terlihat jelas.
Buka dok mengambang DevSuite Pro dan klik ikon Pemeriksa Z-Index. Alat ini akan memindai halaman dan mengidentifikasi setiap elemen dengan nilai z-index serta setiap batas stacking context.
Elemen dengan nilai z-index mendapatkan overlay berwarna langsung di halaman, dengan label yang menunjukkan angka z-index-nya. Nilai yang lebih tinggi muncul dengan warna lebih hangat, nilai rendah dengan warna lebih dingin.
Buka panel samping untuk melihat semua lapisan z-index yang diurutkan dari tertinggi ke terendah. Setiap entri menunjukkan nilai, selektor, dan properti posisi. Klik entri untuk menyorot elemen di halaman.
Bagian "Stacking Contexts" pada panel mencantumkan setiap elemen yang membuat konteks tumpukan baru dan properti CSS yang bertanggung jawab. Ini biasanya merupakan kunci untuk memahami masalah z-index.
Klik elemen apa pun untuk melihat rantai stacking context leluhurnya — konteks induk mana yang memengaruhi urutan perenderannya. Ikuti rantai ke atas untuk menemukan batas konteks yang menyebabkan masalah tumpukan.
Instal DevSuite Pro secara gratis dan buka 64+ alat pengembang untuk browser Anda.
