Αυτό που κανείς δεν σας είπε για το z-index. Το Z-index εξήγησε: πώς να τοποθετήσετε στοιχεία με CSS

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

Περιγραφή του προβλήματος:

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

Παρακάτω είναι ο κώδικας HTML με βασική διάταξη CSS.

.red, .green, .blue (θέση: απόλυτο;) .red (φόντο: κόκκινο; z-index: 1;). πράσινο (φόντο: πράσινο;). μπλε (φόντο: μπλε;)
Παράδειγμα στο jsfiddle

Μια εργασία:Κάντε το κόκκινο να είναι πίσω από το μπλε και το πράσινο χωρίς να παραβιάζετε κανέναν από τους ακόλουθους κανόνες:

• Δεν είναι δυνατή η αλλαγή σήμανσης HTML
• Δεν είναι δυνατή η αλλαγή / προσθήκη ευρετηρίου z σε στοιχεία
• Δεν είναι δυνατή η αλλαγή / προσθήκη θέσης σε στοιχεία

Απόφαση:

Η λύση είναι να προσθέσετε λίγο λιγότερο από μία αδιαφάνεια στην πρώτη (μητρική κόκκινη).
Εδώ είναι το css για να το δείξετε αυτό:
div: first-child (αδιαφάνεια: .99;)

Χμμ, κάτι δεν πάει καλά. Τι σχέση έχει η διαφάνεια; Πώς επηρεάζει την αλληλεπικαλυπτόμενη σειρά των στοιχείων; Πιστεύεις το ίδιο; Καλως ηρθες στο κλαμπ!
Ας ελπίσουμε ότι, στο δεύτερο μέρος του άρθρου, όλα θα τεθούν στη θέση τους.

Ανάμειξη στοιχείων:

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

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

Εάν οι ιδιότητες ευρετηρίου z και θέσης δεν έχουν ρυθμιστεί ρητά, όλα είναι απλά: η σειρά στοίβαξης είναι ίση με τη σειρά των στοιχείων σε HTML. (Στην πραγματικότητα είναι λίγο πιο περίπλοκο, αλλά αρκεί να μην χρησιμοποιείτε αρνητικές τιμές για την επικάλυψη των ενσωματωμένων στοιχείων, δεν θα αντιμετωπίσετε θήκες)

Εάν καθορίσετε ρητά τη θέση σε στοιχεία (και τα παιδιά τους), τότε τέτοια στοιχεία θα αλληλεπικαλύπτονται χωρίς μια συγκεκριμένη ιδιότητα τοποθέτησης. (Όταν λέω "προσδιορίστε ρητά τη θέση" - εννοώ οποιαδήποτε άλλη τιμή εκτός από στατική, για παράδειγμα: απόλυτη ή σχετική).

Τέλος, μια περίπτωση όπου ο δείκτης z καθορίζεται. Για αρχάριους, είναι φυσικό να υποθέσουμε ότι τα στοιχεία με υψηλότερο δείκτη z θα είναι πάνω από τα στοιχεία με χαμηλότερο δείκτη z και οποιοδήποτε στοιχείο με ένα σύνολο ευρετηρίου z θα είναι πάνω από ένα στοιχείο χωρίς ένα σύνολο ευρετηρίου z, αλλά αυτό είναι όχι η περίπτωση. Πρώτον, ο δείκτης z βασίζεται μόνο σε στοιχεία που έχουν τοποθετηθεί ρητά. Εάν προσπαθήσετε να ορίσετε το ευρετήριο z σε ένα στοιχείο που δεν είναι τοποθετημένο, δεν συμβαίνει τίποτα. Δεύτερον, οι τιμές ευρετηρίου z μπορούν να δημιουργήσουν περιβάλλοντα επικάλυψης. Χμμ, τα πράγματα έχουν γίνει πολύ πιο περίπλοκα, έτσι δεν είναι;

Περιβάλλον επικάλυψης

Τα αδέλφια που μετακινούνται στο προσκήνιο ή στο φόντο είναι συλλογικά γνωστά ως περιβάλλον επικάλυψης. Η κατανόηση του περιβάλλοντος επικάλυψης είναι το κλειδί για την κατανόηση του ευρετηρίου z και της σειράς επικάλυψης των στοιχείων.

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

Ένα νέο πλαίσιο μπορεί να διαμορφωθεί στις ακόλουθες περιπτώσεις:

• Εάν το στοιχείο είναι το ριζικό στοιχείο του εγγράφου (στοιχείο)
  Εάν το στοιχείο δεν είναι στατικά τοποθετημένο και το ευρετήριο z δεν είναι αυτόματο
  Εάν το στοιχείο έχει διαφάνεια μικρότερη από 1

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

Χρησιμοποιώντας αυτήν την ιδιότητα, μπορείτε να τοποθετήσετε τμήματα κειμένου (και όχι μόνο κείμενο) το ένα πάνω από το άλλο, ενώ λαμβάνετε κάτι σαν τρισδιάστατο εφέ.

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

Για σαφήνεια, ρίξτε μια ματιά στις δύο παρακάτω εικόνες:

"Σχετική τοποθέτηση"

"Απόλυτη τοποθέτηση"

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

Ο απλούστερος τρόπος για να εξηγήσετε πώς λειτουργεί αυτή η ιδιότητα είναι με μια εικόνα:

Το στοιχείο με υψηλότερη τιμή θα είναι υψηλότερο.

Τώρα ας ρίξουμε μια πιο προσεκτική ματιά στο demo μας.

Δημιουργία του 1ου μπλοκ

# επίπεδο1 (
φόντο: # 707070;
χρώμα: #fff;
θέση: σχετική
πλάτος: 800px;
ύψος: 450 εικονοστοιχεία;
}

Με τη βοήθεια των στυλ, δίνουμε σε αυτό το μπλοκ μια σχετική θέση. Χάρη σε αυτό, μπορούμε να τοποθετήσουμε επιπλέον μπλοκ μέσα.

Δημιουργία του 2ου μπλοκ

Αναλογικά με το 1ο μπλοκ, δημιουργήστε ένα μπλοκ. Αυτό το μπλοκ διαφέρει μόνο από το αναγνωριστικό του (id = "layer2").

# επίπεδο2 (
φόντο: # f9ad81;
χρώμα: #fff;
θέση: απόλυτη;
κορυφή: 40 εικονοστοιχεία;
αριστερά: 50 εικονοστοιχεία;
πλάτος: 400px;
ύψος: 400px;
ευρετήριο z: 1;
}

Δώστε το δεύτερο μπλοκ απόλυτη θέση. Τώρα θα είναι σίγουρα μέσα στον πρώτο και δεν θα πάει πουθενά. Επιπλέον, ορίζουμε το χαρακτηριστικό z-index (= 1). Αυτό σημαίνει ότι το μπλοκ # 2 θα είναι πάνω από το πρώτο.

Δημιουργία του 3ου μπλοκ

# επίπεδο3 (
φόντο: # 6dcff6;
χρώμα: #fff;
θέση: απόλυτη;
κορυφή: 80px;
αριστερά: 100 εικονοστοιχεία;
πλάτος: 600 εικονοστοιχεία;
ύψος: 200px;
ευρετήριο z: 2;
}

Σε αυτό το μπλοκ, z-index = 2.

Μπορείτε να δοκιμάσετε να αλλάξετε τους δείκτες μπλοκ και να δείτε το αποτέλεσμα.

Να θυμάστε ότι ένα στοιχείο με χαμηλότερο δείκτη z θα είναι πάντα κάτω από ένα στοιχείο με υψηλότερο δείκτη z. Δηλαδή, μπορείτε να δώσετε το μπλοκ # 1 ευρετήριο = 999 και το μπλοκ # 2 - 1000. Το αποτέλεσμα θα είναι το ίδιο.

Αυτό είναι για σήμερα! Ευχαριστώ για την προσοχή!

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

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

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

https://codepen.io/ivhed/pen/erGoJE

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

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

Μπλε, .pink, .orange (
θέση: απόλυτη;
) .ροζ (
φίλτρο: hue-rotate (20deg);
). μπλε (
ευρετήριο z: 2;
). πορτοκάλι (
ευρετήριο z: 3;
). πράσινο (
ευρετήριο z: 100;
}

https://codepen.io/ivhed/pen/LmWMQb

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

Περίληψη

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

Όταν εφαρμόζονται ορισμένες ιδιότητες CSS, ένα στοιχείο μπορεί να σχηματίσει ένα περιβάλλον ανάμειξης. Οι βαθμολογίες Z έχουν νόημα μόνο στο ίδιο περιβάλλον επικάλυψης.

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

Τα στοιχεία ελέγχου ιδιοτήτων z-index σειρά υπέρθεσηςτοποθετημένα στοιχεία όταν επικαλύπτονται. Η ιδιότητα δέχεται ακέραιες θετικές και αρνητικές τιμές.

Στην κανονική ροή, θέση: στατικά στοιχεία τοποθετούνται διαδοχικά το ένα μετά το άλλο με τη σειρά με την οποία ορίζονται στο έγγραφο html. Η προεπιλογή είναι z-index: auto; ...

Σύκο. 1. Θέση στοιχείων κατά μήκος του άξονα Ζ

Η ιδιότητα z-index καθορίζει τη σειρά με την οποία τα στοιχεία τοποθετούνται κατά μήκος του άξονα z. Κανονικά, στοιχεία με υψηλή τιμή ευρετηρίου θα επικαλύπτονται στοιχεία με χαμηλότερη τιμή και αυτόματη τιμή, που βρίσκονται στο προσκήνιο.

Σύκο. 2. Επηρεάζοντας την ιδιότητα ευρετηρίου z σε στοιχεία που έχουν τοποθετηθεί

Περιβάλλον επικάλυψης

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

Στοιχείο ρίζας

Τοποθετημένα, τοποθετημένα στοιχεία σε αρχική σειρά. Το τελευταίο θα είναι στο προσκήνιο.

Σύκο. 3. Προεπιλεγμένη σειρά στοιχείων σε χώρο 3D

Όπως μπορείτε να δείτε από την εικόνα, το στοιχείο με τη θέση: απόλυτο; βρίσκεται στο προσκήνιο, ακολουθούμενο από κείμενο, κάτω από αυτά είναι κινούμενα στοιχεία με πλωτήρα: αριστερά; , τα στοιχεία μπλοκ που δεν έχουν τοποθετηθεί βρίσκονται στο παρασκήνιο (δεδομένου ότι τα αιωρούμενα και τοποθετημένα στοιχεία αφαιρούνται από τη ροή, τα μπλοκ μη τοποθετημένα στοιχεία τα αγνοούν και τοποθετούνται το ένα μετά το άλλο, σύμφωνα με τη σήμανση, έτσι το στοιχείο