Επεξήγηση ευρετηρίου Z: Πώς να στοιβάξετε στοιχεία χρησιμοποιώντας CSS

Πάντα αγωνίζομαι με το CS-property z-index. Ακούγεται τόσο εύκολο στην αρχή. Στοιχεία με υψηλότερη τιμή ευρετηρίου z εμφανίζονται μπροστά από εκείνα με χαμηλότερη τιμή ευρετηρίου z. Ωστόσο, πολλές φορές έχω καταλήξει σε καταστάσεις όπου φαίνεται ότι η τιμή του δείκτη z δεν είχε καμία επίδραση.

Αποφάσισα ότι θα είχα αρκετή δοκιμή και σφάλμα με το z-index και ότι ήθελα να κατανοήσω καλύτερα. Ελπίζω ότι αυτό το άρθρο μπορεί να σας βοηθήσει, ώστε να μην αναρωτιέστε ποτέ γιατί το z-index δεν κάνει αυτό που περιμένετε να κάνει.

Προεπιλεγμένη σειρά στοίβαξης

Ας αναφέρουμε πρώτα την προεπιλεγμένη σειρά που αποθηκεύει τα στοιχεία στο πρόγραμμα περιήγησης, όταν δεν εφαρμόζεται ευρετήριο z:

  1. Στοιχείο ρίζας (το στοιχείο)
  2. Μη τοποθετημένα στοιχεία με τη σειρά που ορίζονται
  3. Τοποθετημένα στοιχεία με τη σειρά που ορίζονται

Ένα μη τοποθετημένο στοιχείο είναι ένα στοιχείο με την προεπιλεγμένη στατική τιμή θέσης. Ένα στοιχείο με θέση είναι ένα στοιχείο με οποιαδήποτε άλλη τιμή θέσης. Παραδείγματα άλλων τιμών είναι: απόλυτες, σχετικές, κολλώδεις ή σταθερές.

HTML:

CSS:

/* This is only the CSS that is relevant for the example. For the complete CSS check the links below the pictures. */
.blue, .pink, .orange { position: absolute;}

Ορίσαμε το πράσινο πλαίσιο τελευταίο στο έγγραφο. Ακόμα, εμφανίζεται πίσω από τους άλλους, επειδή δεν είναι τοποθετημένο.

Στοίβαξη με z-index

Εάν τώρα θέλουμε να αλλάξουμε τη σειρά στοίβαξης αυτών των στοιχείων, μπορούμε να χρησιμοποιήσουμε το ευρετήριο z ιδιοτήτων. Ένα στοιχείο με υψηλότερο δείκτη z θα εμφανίζεται μπροστά από ένα στοιχείο με χαμηλότερο δείκτη z. Ένα πράγμα που πρέπει να σημειωθεί είναι ότι το z-index λειτουργεί μόνο με στοιχεία που έχουν τοποθετηθεί .

.blue, .pink, .orange { position: absolute;}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100; // has no effect since the green box is non- positioned}

Το πορτοκαλί κουτί με υψηλότερο δείκτη z εμφανίζεται μπροστά από το μπλε κουτί.

Στοίβαξη περιβάλλοντος

Ας πούμε ότι προσθέτουμε ένα άλλο πλαίσιο σε διάταξη που θέλουμε να τοποθετήσουμε πίσω από το ροζ κουτί. Ενημερώνουμε τον κωδικό μας ως εξής:

HTML:

CSS:

.blue, .pink, .orange, .purple { position: absolute;}
.purple { z-index: 0;}
.pink { z-index: 1;}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100;}

Το ροζ κουτί μας εμφανίζεται μπροστά από το μωβ κουτί όπως αναμενόταν, αλλά τι συνέβη στο πορτοκαλί κουτί; Γιατί είναι ξαφνικά πίσω από το μπλε, παρόλο που έχει υψηλότερο δείκτη z; Αυτό συμβαίνει επειδή η προσθήκη μιας τιμής ευρετηρίου z σε ένα στοιχείο σχηματίζει αυτό που ονομάζεται περιβάλλον στοίβαξης .

Το ροζ πλαίσιο έχει τιμή ευρετηρίου z διαφορετική από την αυτόματη, η οποία σχηματίζει ένα νέο περιβάλλον στοίβαξης. Το γεγονός ότι σχηματίζει ένα περιβάλλον στοίβαξης επηρεάζει τον τρόπο εμφάνισης των θυγατρικών του στοιχείων.

Είναι δυνατόν να αλλάξετε τη σειρά στοίβαξης των θυγατρικών στοιχείων ροζ κουτιού. Ωστόσο, ο δείκτης z τους έχει νόημα μόνο σε αυτό το πλαίσιο στοίβαξης . Αυτό σημαίνει ότι, δεν θα μπορέσουμε να μετακινήσουμε το πορτοκαλί πλαίσιο μπροστά από το μπλε κουτί, επειδή δεν βρίσκονται πλέον στο ίδιο περιβάλλον στοίβαξης.

Εάν θέλουμε το μπλε πλαίσιο και το πορτοκαλί πλαίσιο να είναι μέρος του ίδιου πλαισίου στοίβαξης, μπορούμε να ορίσουμε το μπλε πλαίσιο ως θυγατρικό στοιχείο του ροζ κουτιού. Αυτό θα κάνει το μπλε κουτί να εμφανίζεται πίσω από το πορτοκαλί.

Τα περιβάλλοντα στοίβαξης δεν δημιουργούνται μόνο κατά την εφαρμογή του ευρετηρίου z σε ένα στοιχείο. Υπάρχουν πολλές άλλες ιδιότητες που κάνουν τα στοιχεία να σχηματίζουν περιβάλλοντα στοίβαξης. Μερικά παραδείγματα είναι: φίλτρο, αδιαφάνεια και μετασχηματισμός.

Ας επιστρέψουμε στο προηγούμενο μας παράδειγμα. Το μπλε κουτί είναι και πάλι αδελφό του ροζ κουτιού. Αυτή τη φορά, αντί να προσθέτουμε z-index στο ροζ πλαίσιο, εφαρμόζουμε ένα φίλτρο σε αυτό.

HTML:

CSS:

.blue, .pink, .orange { position: absolute;}
.pink { filter: hue-rotate(20deg);}
.blue { z-index: 2;}
.orange { z-index: 3;}
.green { z-index: 100;}

Το πορτοκαλί κουτί έχει ακόμα υψηλότερο δείκτη z από το μπλε, αλλά εξακολουθεί να εμφανίζεται πίσω από αυτό. Αυτό συμβαίνει επειδή η τιμή του φίλτρου προκάλεσε το ροζ πλαίσιο να σχηματίσει ένα νέο περιβάλλον στοίβαξης.

Περίληψη

Χρησιμοποιώντας το ευρετήριο z σε τοποθετημένα στοιχεία, μπορούμε να αλλάξουμε την προεπιλεγμένη σειρά στοίβαξης.

Κατά την εφαρμογή ορισμένων ιδιοτήτων CSS, ένα στοιχείο μπορεί να σχηματίσει ένα περιβάλλον στοίβαξης. Οι τιμές ευρετηρίου Z έχουν νόημα μόνο στο ίδιο περιβάλλον στοίβαξης.

Για περισσότερες πληροφορίες σχετικά με το z-index, προτείνω αυτό το άρθρο. Πήρα πολύ έμπνευση από αυτό όταν το έγραψα.

Ευχαριστώ για την ανάγνωση! :)