Ο Επιθεωρητής Z-Index αποκαλύπτει την πλήρη σειρά στοίβαξης κάθε στοιχείου σε μια ιστοσελίδα. Κάθε στοιχείο με τιμή z-index επισημαίνεται και επισημαίνεται απευθείας στη σελίδα, και ένας ταξινομημένος πίνακας χάρτη επιπέδων δείχνει όλα τα επίπεδα z-index από κάτω ως πάνω. Αναγνωρίζει stacking contexts που δημιουργούνται από position, transform, opacity και άλλες ιδιότητες CSS — κάνοντας τελικά την αποσφαλμάτωση z-index οπτική και διαισθητική.
Τα bugs z-index είναι από τα πιο απογοητευτικά ζητήματα στο CSS. Ένα modal που πρέπει να εμφανίζεται πάνω από τα πάντα κρύβεται πίσω από ένα sidebar. Ένα dropdown μενού εξαφανίζεται πίσω από την επόμενη ενότητα. Ένα tooltip είναι αόρατο επειδή ένα γονικό στοιχείο δημιουργεί απρόσμενο stacking context. Η βαθύτερη αιτία είναι σχεδόν πάντα παρανόηση του τρόπου λειτουργίας stacking contexts — και τα DevTools browser δίνουν ελάχιστη βοήθεια για οπτικοποίησή τους. Ο Επιθεωρητής Z-Index κάνει το αόρατο ορατό. Κάθε στοιχείο με ρητό z-index λαμβάνει έγχρωμη επικάλυψη και ετικέτα. Ένας ταξινομημένος πίνακας χάρτη επιπέδων απαριθμεί όλες τις τιμές z-index από κάτω ως πάνω. Το εργαλείο εντοπίζει επίσης όρια stacking context — στοιχεία που δημιουργούν νέα stacking contexts μέσω position, transform, opacity, filter, will-change ή isolation.
Κάθε στοιχείο με τιμή z-index λαμβάνει ημιδιαφανή έγχρωμη επικάλυψη και σήμα ετικέτας που δείχνει τον αριθμό z-index. Υψηλότερες τιμές z-index λαμβάνουν θερμότερα χρώματα (κόκκινα), χαμηλότερες τιμές πιο ψυχρά (μπλε). Η οπτική στοίβαξη κάνει τη σειρά στοίβαξης άμεσα κατανοητή.
Ένας πλαϊνός πίνακας απαριθμεί όλες τις τιμές z-index που βρέθηκαν στη σελίδα, ταξινομημένες από υψηλότερη (πάνω) ως χαμηλότερη (κάτω). Κάθε καταχώριση δείχνει την τιμή z-index, τον CSS selector ή το όνομα κλάσης και την ιδιότητα position. Κάντε κλικ σε οποιαδήποτε καταχώριση για επισήμανση του στοιχείου.
Αναγνωρίζει κάθε όριο stacking context στη σελίδα και την ιδιότητα CSS που το δημιουργεί — position: relative/absolute με z-index, transform, opacity μικρότερο του 1, filter, will-change, isolation: isolate ή contain: layout. Απαριθμούνται ξεχωριστά για ανίχνευση γιατί μια τιμή z-index δεν συμπεριφέρεται όπως αναμένεται.
Κάντε κλικ σε οποιοδήποτε επίπεδο στον πίνακα για επισήμανση και κύλιση στο αντίστοιχο στοιχείο στη σελίδα. Ή κάντε κλικ σε οποιοδήποτε επισημασμένο στοιχείο στη σελίδα για εντοπισμό στον πίνακα χάρτη επιπέδων.
Κάθε καταχώριση επιπέδου δείχνει την τιμή CSS position του στοιχείου (static, relative, absolute, fixed, sticky) καθώς το z-index εφαρμόζεται μόνο σε positioned elements. Εντοπίστε περιπτώσεις όπου το z-index ορίζεται αλλά η position είναι static — κοινό bug όπου το z-index δεν έχει καμία επίδραση.
Για οποιοδήποτε επιλεγμένο στοιχείο, δείτε την πλήρη αλυσίδα ancestor stacking contexts μέχρι τη ρίζα. Κατανοήστε ακριβώς ποιο stacking context ancestor περιορίζει το z-index scope του στοιχείου — η βασική ιδέα για την αποσφαλμάτωση z-index.
Ένα modal με z-index: 9999 κρύβεται πίσω από sidebar με z-index: 10. Πώς; Ο Επιθεωρητής Z-Index δείχνει ότι ο γονέας του modal έχει position: relative και δημιουργεί stacking context με z-index: 1, ενώ ο γονέας του sidebar έχει z-index: 2. Το modal δεν μπορεί ποτέ να ξεφύγει από το context του γονέα του.
Ένα dropdown μενού εξαφανίζεται πίσω από την επόμενη ενότητα όταν ανοίγει. Ο επιθεωρητής αποκαλύπτει ότι το container του μενού έχει overflow: hidden (που επίσης δημιουργεί stacking context) ή ότι η επόμενη ενότητα έχει υψηλότερο z-index. Η οπτική επισήμανση επιπέδων κάνει την επικάλυψη εμφανή.
Με τον καιρό, οι τιμές z-index συσσωρεύονται: 10, 100, 999, 9999, 99999. Ο χάρτης επιπέδων δείχνει όλες τις τιμές ταξινομημένες, κάνοντας εύκολη την αναγνώριση του πραγματικού εύρους που χρειάζεται και την απλοποίηση σε καθαρή κλίμακα.
Τα chat widgets, banners cookies και επικαλύψεις analytics εισάγουν στοιχεία με υψηλές τιμές z-index. Ο Επιθεωρητής Z-Index δείχνει ακριβώς τι τιμές χρησιμοποιούν, βοηθώντας σας να ορίσετε τις δικές σας τιμές z-index κατάλληλα για αποφυγή συγκρούσεων.
Ελέγξτε όλα τα stacking contexts στη σελίδα για εντοπισμό περιττών. Transforms, filters και opacity που εφαρμόζονται για οπτικά εφέ μπορεί αθέλητα να δημιουργήσουν stacking contexts που προκαλούν ζητήματα z-index αλλού. Η λίστα contexts τα κάνει όλα ορατά.
Ανοίξτε το floating dock του DevSuite Pro και κάντε κλικ στο εικονίδιο Επιθεωρητή Z-Index. Το εργαλείο σαρώνει τη σελίδα και αναγνωρίζει κάθε στοιχείο με τιμή z-index και κάθε όριο stacking context.
Τα στοιχεία με τιμές z-index λαμβάνουν έγχρωμες επικαλύψεις απευθείας στη σελίδα, με ετικέτες που δείχνουν τους αριθμούς z-index. Υψηλότερες τιμές εμφανίζονται με θερμότερα χρώματα, χαμηλότερες με ψυχρότερα.
Ανοίξτε τον πλαϊνό πίνακα για να δείτε όλα τα επίπεδα z-index ταξινομημένα από υψηλότερο ως χαμηλότερο. Κάθε καταχώριση δείχνει την τιμή, selector και ιδιότητα position. Κάντε κλικ σε οποιαδήποτε καταχώριση για επισήμανση του στοιχείου.
Η ενότητα Stacking Contexts του πίνακα απαριθμεί κάθε στοιχείο που δημιουργεί νέο stacking context και την υπεύθυνη ιδιότητα CSS. Αυτό είναι συνήθως το κλειδί για κατανόηση ζητημάτων z-index.
Κάντε κλικ σε οποιοδήποτε στοιχείο για να δείτε την αλυσίδα ancestor stacking context — ποια γονικά contexts επηρεάζουν τη σειρά απόδοσής του. Ακολουθήστε την αλυσίδα προς τα πάνω για εντοπισμό του ορίου context που προκαλεί το πρόβλημα στοίβαξης.
Εγκαταστήστε το DevSuite Pro δωρεάν και ξεκλειδώστε 39+ εργαλεία προγραμματιστή για το πρόγραμμα περιήγησής σας.
