div ( z-index: 1; /* integer */ )Η z-indexιδιότητα στο CSS ελέγχει την κάθετη σειρά στοίβαξης στοιχείων που επικαλύπτονται. Όπως και σε ποια, εμφανίζεται σαν να είναι πιο κοντά σας. z-indexεπηρεάζει μόνο στοιχεία που έχουν τιμή θέσης διαφορετική από την static(προεπιλογή).
Τα στοιχεία μπορούν να αλληλεπικαλύπτονται για διάφορους λόγους, για παράδειγμα, η σχετική τοποθέτηση το έχει ωθήσει πάνω από κάτι άλλο. Το αρνητικό περιθώριο έχει τραβήξει το στοιχείο πάνω από ένα άλλο. Τα απόλυτα τοποθετημένα στοιχεία αλληλεπικαλύπτονται. Όλα τα είδη των λόγων.
Χωρίς καμία z-indexτιμή, τα στοιχεία στοιβάζονται με τη σειρά που εμφανίζονται στο DOM (το χαμηλότερο στο ίδιο επίπεδο ιεραρχίας εμφανίζεται στην κορυφή). Στοιχεία με μη στατική θέση θα εμφανίζονται πάντα πάνω από στοιχεία με προεπιλεγμένη στατική θέση.
Σημειώστε επίσης ότι η φωλιά παίζει μεγάλο ρόλο. Εάν ένα στοιχείο Β βρίσκεται πάνω από το στοιχείο Α, ένα θυγατρικό στοιχείο του στοιχείου Α δεν μπορεί ποτέ να είναι υψηλότερο από το στοιχείο Β.
Σημειώστε ότι η παλαιότερη έκδοση του IE κάνει αυτό το περιεχόμενο να είναι λίγο βιδωμένο. Ακολουθεί μια λύση jQuery για αυτό.
Περισσότερες πληροφορίες
- Screencast: Πώς λειτουργεί το ευρετήριο z
- Έγγραφα MDN
- Αναλυτικό άρθρο: Κατανόηση του ευρετηρίου z
- Ορθολογικές τιμές ευρετηρίου z
Υποστήριξη προγράμματος περιήγησης
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| Εργα | Εργα | Εργα | Εργα | 4+ | 4+ | Εργα |