← Torna alle funzionalità
Pro

Ispettore Z-Index

Rivela ordine stacking completo di ogni elemento.

I bug z-index sono frustranti. L'Ispettore rende visibile l'invisibile.

Anteprima dal vivo
example.com/app-dashboard
Stacking layers visualization
z-index: 1 · main-content
z-index: 10 · sidebar
z-index: 100 · modal-backdrop
z-index: 999 · modal-dialog
Confirm deletion?
z-index: 9999
tooltip
Z-Index Layers
5 layers · 2 stacking contexts
9999 .tooltip fixed
999 .modal-dialog fixed
100 .modal-backdrop fixed
10 .sidebar relative
1 .main-content relative
Stacking Contexts
html (root)
.modal-backdrop (opacity: 0.5)
Caratteristiche principali

Visualizzazione livelli

Ogni elemento con z-index riceve sovrapposizione colorata.

Mappa livelli ordinata

Pannello con tutti i valori dal piu alto al piu basso.

Rilevamento contesti

Identifica contesti da position, transform, opacity.

Collegamento bidirezionale

Clicca nel pannello per evidenziare e viceversa.

Indicatori position

Ogni livello mostra il valore position.

Catena contesti

Catena completa di contesti antenati.

Casi d'uso comuni

Debug modal

Modal nascosto? L'ispettore mostra il conflitto di contesti.

Stacking dropdown

Dropdown scompare? L'ispettore rivela il conflitto.

Pulizia z-index

Mappa ordinata per semplificare la scala.

Widget terze parti

Scopri valori z-index di chat e cookie banner.

Audit contesti

Trova contesti non necessari.

Come usare
1

Attiva

Apri dock e clicca icona.

2

Visualizza livelli

Sovrapposizioni colorate appaiono.

3

Naviga mappa

Pannello con livelli ordinati.

4

Controlla contesti

Sezione contesti di stacking.

5

Traccia catena

Clicca per vedere catena antenati.

Pronto a provare? Ispettore Z-Index?

Installa DevSuite Pro gratuitamente e sblocca più di 39 strumenti per sviluppatori per il tuo browser.

Aggiungi a Chrome Aggiungi a Edge Aggiungi a FireFox