Έχετε ορίσει ποτέ το z-index: 99999 σε ένα στοιχείο στο CSS σας και δεν βγαίνει πάνω από άλλα στοιχεία; Μια τόσο μεγάλη τιμή θα πρέπει εύκολα να τοποθετεί αυτό το στοιχείο οπτικά πάνω από οτιδήποτε άλλο, υποθέτοντας ότι όλα τα διαφορετικά στοιχεία έχουν οριστεί είτε σε χαμηλότερη τιμή είτε δεν έχουν οριστεί καθόλου. Μια ιστοσελίδα συνήθως αναπαρίσταται σε ένα δισδιάστατο χώρο. Ωστόσο, εφαρμόζοντας συγκεκριμένες ιδιότητες CSS, εισάγεται ένα φανταστικό επίπεδο του άξονα z για να μεταφέρει το βάθος. Αυτό το επίπεδο είναι κάθετο στην οθόνη και από αυτό ο χρήστης αντιλαμβάνεται τη σειρά των στοιχείων, το ένα πάνω στο άλλο. Η ιδέα πίσω από τον φανταστικό άξονα z, την αντίληψη του χρήστη για τα στοιβαγμένα στοιχεία, είναι ότι οι ιδιότητες CSS που το δημιουργούν συνδυάζονται για να σχηματίσουν αυτό που ονομάζουμε περιβάλλον στοίβαξης. Θα μιλήσουμε για το πώς τα στοιχεία «στοιβάζονται» σε μια ιστοσελίδα, τι ελέγχει τη σειρά στοίβαξης και πρακτικές προσεγγίσεις για την «αποστοίβαξη» στοιχείων όταν χρειάζεται. Σχετικά με τη στοίβαξη πλαισίων Φανταστείτε την ιστοσελίδα σας ως γραφείο. Καθώς προσθέτετε στοιχεία HTML, τοποθετείτε κομμάτια χαρτιού, το ένα μετά το άλλο, στο γραφείο. Το τελευταίο κομμάτι χαρτιού που τοποθετήθηκε είναι ισοδύναμο με το στοιχείο HTML που προστέθηκε πιο πρόσφατα και βρίσκεται πάνω από όλα τα άλλα χαρτιά που έχουν τοποθετηθεί πριν από αυτό. Αυτή είναι η κανονική ροή εγγράφων, ακόμη και για ένθετα στοιχεία. Το ίδιο το γραφείο αντιπροσωπεύει το περιβάλλον στοίβαξης ρίζας, που σχηματίζεται από το στοιχείο , το οποίο περιέχει όλους τους άλλους φακέλους. Τώρα, συγκεκριμένες ιδιότητες CSS μπαίνουν στο παιχνίδι. Ιδιότητες όπως θέση (με δείκτη z), αδιαφάνεια, μετασχηματισμός και περιέχει) λειτουργούν σαν φάκελος. Αυτός ο φάκελος παίρνει ένα στοιχείο και όλα τα παιδιά του, τα εξάγει από την κύρια στοίβα και τα ομαδοποιεί σε ξεχωριστή υπο-στοίβα, δημιουργώντας αυτό που ονομάζουμε περιβάλλον στοίβαξης. Για τα τοποθετημένα στοιχεία, αυτό συμβαίνει όταν δηλώνουμε μια τιμή z-index διαφορετική από την αυτόματη. Για ιδιότητες όπως η αδιαφάνεια, ο μετασχηματισμός και το φίλτρο, το περιβάλλον στοίβαξης δημιουργείται αυτόματα όταν εφαρμόζονται συγκεκριμένες τιμές.
Προσπαθήστε να το καταλάβετε: Μόλις ένα κομμάτι χαρτί (δηλαδή, ένα θυγατρικό στοιχείο) βρίσκεται μέσα σε έναν φάκελο (δηλαδή, το περιβάλλον στοίβαξης του γονέα), δεν μπορεί ποτέ να βγει από αυτόν τον φάκελο ή να τοποθετηθεί ανάμεσα σε χαρτιά σε διαφορετικό φάκελο. Ο δείκτης z του είναι πλέον σχετικός μόνο μέσα στον δικό του φάκελο.
Στην παρακάτω εικόνα, το χαρτί Β βρίσκεται πλέον στο πλαίσιο στοίβαξης του φακέλου Β και μπορεί να παραγγελθεί μόνο με άλλα χαρτιά στο φάκελο.
Φανταστείτε, αν θέλετε, ότι έχετε δύο φακέλους στο γραφείο σας:
.folder-a { z-index: 1; } .folder-b { z-index: 2; }
Ας ενημερώσουμε λίγο τη σήμανση. Ο εσωτερικός φάκελος A είναι μια ειδική σελίδα, z-index: 9999. Ο εσωτερικός φάκελος B είναι μια απλή σελίδα, z-index: 5.
.special-page { z-index: 9999; } .plain-page { z-index: 5; }
Ποια σελίδα είναι στην κορυφή; Είναι η .plain-σελίδα στον Φάκελο Β. Το πρόγραμμα περιήγησης αγνοεί τα θυγατρικά χαρτιά και στοιβάζει πρώτα τους δύο φακέλους. Βλέπει τον Φάκελο Β (δείκτης z: 2) και τον τοποθετεί πάνω από τον Φάκελο Α (δείκτης z: 1) επειδή γνωρίζουμε ότι το δύο είναι μεγαλύτερο από ένα. Εν τω μεταξύ, η σελίδα .special-page που έχει οριστεί σε z-index: 9999 βρίσκεται στο κάτω μέρος της στοίβας, παρόλο που ο δείκτης z της έχει οριστεί στην υψηλότερη δυνατή τιμή. Τα περιβάλλοντα στοίβαξης μπορούν επίσης να είναι ένθετα (φάκελοι μέσα σε φακέλους), δημιουργώντας ένα «οικογενειακό δέντρο». Ισχύει η ίδια αρχή: ένα παιδί δεν μπορεί ποτέ να ξεφύγει από το φάκελο των γονιών του. Τώρα που καταλαβαίνετε πώς τα περιβάλλοντα στοίβαξης συμπεριφέρονται σαν φάκελοι που ομαδοποιούν και αναδιατάσσουν επίπεδα, αξίζει να ρωτήσετε: γιατί ορισμένες ιδιότητες — όπως ο μετασχηματισμός και η αδιαφάνεια — δημιουργούν νέα περιβάλλοντα στοίβαξης; Αυτό είναι το πράγμα: αυτές οι ιδιότητες δεν δημιουργούν περιβάλλοντα στοίβαξης λόγω της εμφάνισης τους. το κάνουν λόγω του πώς λειτουργεί το πρόγραμμα περιήγησης κάτω από την κουκούλα. Όταν εφαρμόζετε μετασχηματισμό, αδιαφάνεια, φίλτρο ή προοπτική, λέτε στο πρόγραμμα περιήγησης, "Γεια, αυτό το στοιχείο μπορεί να μετακινηθεί, να περιστραφεί ή να εξασθενίσει, οπότε να είστε έτοιμοι!"
Όταν χρησιμοποιείτε αυτές τις ιδιότητες, το πρόγραμμα περιήγησης δημιουργεί ένα νέο πλαίσιο στοίβαξης για τη διαχείριση της απόδοσης πιο αποτελεσματικά. Αυτό επιτρέπει στο πρόγραμμα περιήγησης να χειρίζεται ανεξάρτητα κινούμενα σχέδια, μετασχηματισμούς και οπτικά εφέ, μειώνοντας την ανάγκη επανυπολογισμού του τρόπου με τον οποίο αυτά τα στοιχεία αλληλεπιδρούν με την υπόλοιπη σελίδα. Σκεφτείτε το όπως λέει το πρόγραμμα περιήγησης: «Θα χειριστώ αυτόν τον φάκελο ξεχωριστά, ώστε να μην χρειάζεται να ανακατασκευάζω ολόκληρο το γραφείο κάθε φορά που αλλάζει κάτι μέσα σε αυτό». Αλλά υπάρχειμια παρενέργεια. Μόλις το πρόγραμμα περιήγησης ανυψώσει ένα στοιχείο στο δικό του επίπεδο, πρέπει να "ισιώσει" τα πάντα μέσα σε αυτό, δημιουργώντας ένα νέο πλαίσιο στοίβαξης. Είναι σαν να βγάζετε ένα φάκελο από το γραφείο για να τον χειριστείτε ξεχωριστά. τα πάντα μέσα σε αυτόν τον φάκελο ομαδοποιούνται και το πρόγραμμα περιήγησης το αντιμετωπίζει πλέον ως μια ενιαία μονάδα όταν αποφασίζει τι βρίσκεται πάνω από τι. Έτσι, παρόλο που οι ιδιότητες μετασχηματισμού και αδιαφάνειας μπορεί να μην φαίνεται να επηρεάζουν τον τρόπο με τον οποίο τα στοιχεία στοιβάζονται οπτικά, επηρεάζουν, και είναι για βελτιστοποίηση απόδοσης. Πολλές άλλες ιδιότητες CSS μπορούν επίσης να δημιουργήσουν περιβάλλοντα στοίβαξης για παρόμοιους λόγους. Το MDN παρέχει μια πλήρη λίστα εάν θέλετε να σκάψετε βαθύτερα. Υπάρχουν αρκετά, κάτι που δείχνει μόνο πόσο εύκολο είναι να δημιουργήσεις ακούσια ένα πλαίσιο στοίβαξης χωρίς να το γνωρίζεις. Το πρόβλημα της «Αποστοίβαξης». Τα προβλήματα στοίβαξης μπορεί να προκύψουν για πολλούς λόγους, αλλά μερικοί είναι πιο συνηθισμένοι από άλλους. Τα Modal στοιχεία είναι ένα κλασικό μοτίβο επειδή απαιτούν την εναλλαγή του στοιχείου για να "ανοίξει" σε ένα επάνω στρώμα πάνω από όλα τα άλλα στοιχεία, και στη συνέχεια να το αφαιρέσετε από το επάνω στρώμα όταν είναι "κλειστό". Είμαι αρκετά σίγουρος ότι όλοι μας έχουμε βρεθεί σε μια κατάσταση όπου ανοίγουμε ένα modal και, για οποιονδήποτε λόγο, δεν εμφανίζεται. Δεν είναι ότι δεν άνοιξε σωστά, αλλά ότι δεν φαίνεται σε ένα χαμηλότερο επίπεδο του περιβάλλοντος στοίβαξης. Αυτό σας αφήνει να αναρωτιέστε «πώς γίνεται;» από τότε που έχετε ορίσει:
.επικάλυψη { θέση: σταθερή; /* δημιουργεί το πλαίσιο στοίβαξης */ z-index: 1; /* βάζει το στοιχείο σε ένα επίπεδο πάνω από οτιδήποτε άλλο */ ένθετο: 0; πλάτος: 100%; Ύψος: 100vh; υπερχείλιση: κρυφό; χρώμα φόντου: #00000080; }
Αυτό φαίνεται σωστό, αλλά εάν το γονικό στοιχείο που περιέχει τον κανόνα ετικέτας είναι ένα θυγατρικό στοιχείο σε άλλο γονικό στοιχείο που έχει επίσης οριστεί σε δείκτη z: 1, αυτό τοποθετεί τεχνικά το στοιχείο σε ένα υποστρώμα που αποκρύπτεται από τον κύριο φάκελο. Ας δούμε αυτό το συγκεκριμένο σενάριο και μερικές άλλες κοινές παγίδες στοίβαξης-πλαίσιο. Νομίζω ότι θα δείτε όχι μόνο πόσο εύκολο είναι να δημιουργήσετε ακούσια περιβάλλοντα στοίβαξης, αλλά και πώς να τα διαχειριστείτε κακώς. Επίσης, ο τρόπος επιστροφής σε μια διαχειριζόμενη κατάσταση εξαρτάται από την κατάσταση. Σενάριο 1: The Trapped Modal
Μπορείτε να δείτε αμέσως το modal σας παγιδευμένο σε ένα επίπεδο χαμηλού επιπέδου και να αναγνωρίσετε τον γονέα. Επεκτάσεις προγράμματος περιήγησης Οι έξυπνοι προγραμματιστές έχουν δημιουργήσει επεκτάσεις για να βοηθήσουν. Εργαλεία όπως αυτή η επέκταση Chrome "CSS Stacking Context Inspector" προσθέτουν μια επιπλέον καρτέλα z-index στα Εργαλεία προγραμματιστή σας για να σας δείχνουν πληροφορίες σχετικά με στοιχεία που δημιουργούν ένα πλαίσιο στοίβαξης.
Επεκτάσεις IDE Μπορείτε ακόμη και να εντοπίσετε προβλήματα κατά την ανάπτυξη με μια επέκταση όπως αυτή για τον Κώδικα VS, η οποία επισημαίνει πιθανά ζητήματα περιβάλλοντος στοίβαξης απευθείας στο πρόγραμμα επεξεργασίας σας.
Αφαίρεση στοίβαξης και ανάκτηση ελέγχου Αφού εντοπίσουμε τη βασική αιτία, το επόμενο βήμα είναι να την αντιμετωπίσουμε. Υπάρχουν διάφορες προσεγγίσεις που μπορείτε να ακολουθήσετε για να αντιμετωπίσετε αυτό το πρόβλημα και θα τις απαριθμήσω με τη σειρά. Ωστόσο, μπορείτε να επιλέξετε οποιονδήποτε σε οποιοδήποτε επίπεδο. κανείς δεν μπορεί να παραπονεθεί ή να εμποδίσει τον άλλον. Αλλάξτε τη δομή HTML Αυτή θεωρείται η βέλτιστη λύση. Για να αντιμετωπίσετε ένα ζήτημα περιβάλλοντος στοίβαξης, πρέπει να έχετε τοποθετήσει ορισμένα στοιχεία σε αστείες θέσεις εντός του HTML σας. Η αναδιάρθρωση της σελίδας θα σας βοηθήσει να αναδιαμορφώσετε το DOM και να εξαλείψετε το πρόβλημα του περιβάλλοντος στοίβαξης. Βρείτε το προβληματικό στοιχείο και αφαιρέστε το από το στοιχείο παγίδευσης στη σήμανση HTML. Για παράδειγμα, μπορούμε να λύσουμε το πρώτο σενάριο, "The Trapped Modal", μετακινώντας το .modal-container έξω από την κεφαλίδα και τοποθετώντας το στο στοιχείο
από μόνο του.Αυτό το περιεχόμενο έχει δείκτη z 2 και εξακολουθεί να μην καλύπτει το modal.Κεφαλίδα
Κύριο περιεχόμενο
Όταν κάνετε κλικ στο κουμπί "Open Modal", το modal τοποθετείται μπροστά από οτιδήποτε άλλο όπως υποτίθεται ότι είναι. Δείτε το Σενάριο 1 με το στυλό: The Trapped Modal (Λύση) [διχαλωτή] από τον Shoyombo Gabriel Ayomide. Προσαρμόστε τοΓονικό περιβάλλον στοίβαξης σε CSS Τι γίνεται αν το στοιχείο είναι ένα που δεν μπορείτε να μετακινήσετε χωρίς να σπάσετε τη διάταξη; Είναι καλύτερα να αντιμετωπίσετε το ζήτημα: ο γονέας καθορίζει το πλαίσιο. Βρείτε την ιδιότητα (ή τις ιδιότητες) CSS που είναι υπεύθυνες για την ενεργοποίηση του περιβάλλοντος και καταργήστε το. Εάν έχει σκοπό και δεν μπορεί να αφαιρεθεί, δώστε στον γονέα μια υψηλότερη τιμή δείκτη z από τα αδέρφια στοιχεία του για να σηκώσει ολόκληρο το κοντέινερ. Με υψηλότερη τιμή δείκτη z, το γονικό κοντέινερ μετακινείται στην κορυφή και τα παιδιά του εμφανίζονται πιο κοντά στο χρήστη. Με βάση αυτά που μάθαμε στο σενάριο "The Submerged Dropdown", δεν μπορούμε να μετακινήσουμε το αναπτυσσόμενο μενού εκτός της γραμμής πλοήγησης. δεν θα είχε νόημα. Ωστόσο, μπορούμε να αυξήσουμε την τιμή z-index του κοντέινερ .navbar ώστε να είναι μεγαλύτερη από την τιμή z-index του στοιχείου .content. .navbar { φόντο: #333; /* z-index: 1; */ z-index: 3; θέση: σχετική; }
Με αυτήν την αλλαγή, το .dropdown-menu εμφανίζεται πλέον μπροστά από το περιεχόμενο χωρίς κανένα πρόβλημα. Δείτε το Σενάριο 2 του στυλό: The Submerged Dropdown (Λύση) [διχαλωτή] από τον Shoyombo Gabriel Ayomide. Δοκιμάστε τις πύλες, εάν χρησιμοποιείτε ένα πλαίσιο Σε πλαίσια όπως το React ή το Vue, το Portal είναι μια δυνατότητα που σας επιτρέπει να αποδώσετε ένα στοιχείο εκτός της κανονικής γονικής του ιεραρχίας στο DOM. Οι πύλες είναι σαν μια συσκευή τηλεμεταφοράς για τα εξαρτήματά σας. Σας επιτρέπουν να αποδώσετε το HTML ενός στοιχείου οπουδήποτε στο έγγραφο (συνήθως απευθείας στο document.body), ενώ το διατηρείτε λογικά συνδεδεμένο με τον αρχικό του γονέα για στηρίγματα, καταστάσεις και συμβάντα. Αυτό είναι τέλειο για διαφυγή από παγίδες περιβάλλοντος στοίβαξης, καθώς η απόδοση που αποδίδεται κυριολεκτικά εμφανίζεται έξω από το προβληματικό γονικό κοντέινερ. ReactDOM.createPortal( <Συμβουλή εργαλείου />, έγγραφο.σώμα )
Αυτό διασφαλίζει ότι το αναπτυσσόμενο περιεχόμενό σας δεν θα κρύβεται πίσω από τον γονικό του, ακόμα κι αν ο γονέας έχει υπερχείλιση: κρυφό ή χαμηλότερο δείκτη z. Στο σενάριο "The Clipped Tooltip" που εξετάσαμε νωρίτερα, χρησιμοποίησα μια πύλη για να σώσω την επεξήγηση εργαλείου από την υπερχείλιση: κρυφό κλιπ τοποθετώντας το στο σώμα του εγγράφου και τοποθετώντας το πάνω από τη σκανδάλη μέσα στο κοντέινερ. Δείτε το Σενάριο 3 του στυλό: Η κομμένη επεξήγηση εργαλείου (Λύση) [διχαλωτή] από τον Shoyombo Gabriel Ayomide. Παρουσιάζοντας το πλαίσιο στοίβαξης χωρίς παρενέργειες Όλες οι προσεγγίσεις που επεξηγήθηκαν στην προηγούμενη ενότητα στοχεύουν στην «αποστοίβαξη» στοιχείων από προβληματικά περιβάλλοντα στοίβαξης, αλλά υπάρχουν ορισμένες περιπτώσεις όπου πραγματικά χρειάζεστε ή θέλετε να δημιουργήσετε ένα πλαίσιο στοίβαξης. Η δημιουργία ενός νέου πλαισίου στοίβαξης είναι εύκολη, αλλά όλες οι προσεγγίσεις έχουν μια παρενέργεια. Δηλαδή, εκτός από τη χρήση απομόνωσης: απομόνωση. Όταν εφαρμόζεται σε ένα στοιχείο, το περιβάλλον στοίβαξης των παιδιών αυτού του στοιχείου καθορίζεται σε σχέση με κάθε παιδί και εντός αυτού του πλαισίου, αντί να επηρεάζεται από στοιχεία εκτός αυτού. Ένα κλασικό παράδειγμα είναι η ανάθεση σε αυτό το στοιχείο μια αρνητική τιμή, όπως ο δείκτης z: -1. Φανταστείτε ότι έχετε ένα στοιχείο .card. Θέλετε να προσθέσετε ένα διακοσμητικό σχήμα που να βρίσκεται πίσω από το κείμενο της κάρτας, αλλά πάνω από το φόντο της κάρτας. Χωρίς πλαίσιο στοίβαξης στην κάρτα, το z-index: -1 στέλνει το σχήμα στο κάτω μέρος του περιβάλλοντος στοίβαξης ρίζας (όλη τη σελίδα). Αυτό την κάνει να εξαφανίζεται πίσω από το λευκό φόντο της κάρτας: Δείτε το Pen Negative z-index (πρόβλημα) [διχαλωτή] από τον Shoyombo Gabriel Ayomide. Για να το λύσουμε αυτό, δηλώνουμε απομόνωση: απομόνωση στη γονική κάρτα .: Δείτε το Pen Negative z-index (λύση) [διχαλωτή] από τον Shoyombo Gabriel Ayomide. Τώρα, το ίδιο το στοιχείο .card γίνεται ένα περιβάλλον στοίβαξης. Όταν το στοιχείο θυγατρικό του — το διακοσμητικό σχήμα που δημιουργείται στο :before pseudo-στοιχείο — έχει δείκτη z: -1, πηγαίνει στο κάτω μέρος του περιβάλλοντος στοίβαξης του γονέα. Κάθεται τέλεια πίσω από το κείμενο και πάνω από το φόντο της κάρτας, όπως προβλέπεται. Συμπέρασμα Θυμηθείτε: την επόμενη φορά που ο δείκτης z σας φαίνεται εκτός ελέγχου, είναι ένα παγιδευμένο περιβάλλον στοίβαξης. Αναφορές
Περιβάλλον στοίβαξης (MDN) Z-index και περιβάλλοντα στοίβαξης (web.dev) «Πώς να δημιουργήσετε ένα νέο πλαίσιο στοίβαξης με την ιδιότητα απομόνωσης στο CSS», Natalie Pina “What The Heck, z-index??”, Josh Comeau
Περαιτέρω ανάγνωση στο SmashingMag
«Managing CSS Z-Index In Large Projects», Steven Frieson «Sticky Headers And Full-Height Elements: A Tricky Combination», Philip Braunen «Διαχείριση του Z-Index σε μια εφαρμογή Ιστού που βασίζεται σε στοιχεία», Pavel Pomerantsev “The Z-Index CSS Property: A Comprehensive Look”, Λούης Λάζαρης
