Ευρετήριο Z στο CSS: Τι είναι και τι κάνει

Τι είναι ο δείκτης Z;

Το Z Index ( z-index) είναι μια ιδιότητα CSS που καθορίζει τη σειρά των επικαλυπτόμενων στοιχείων HTML. Στοιχεία με υψηλότερο δείκτη θα τοποθετηθούν πάνω από στοιχεία με χαμηλότερο δείκτη.

Σημείωση : δείκτης Z λειτουργεί μόνο επί τοποθετημένα στοιχεία (position:absolute,position:relative, ήposition:fixed).

Πιθανές τιμές

/* Default value if not specified */ z-index: auto; /* Integer values */ z-index: 1; z-index: 100; z-index: 9999; z-index: -1; /* Global values */ z-index: inherit; z-index: initial; z-index: unset;

Τρόπος χρήσης του ευρετηρίου Z

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

HTML

CSS

#blue { background-color: blue; } #red { background-color: red; } #green { background-color: green; }

Εφόσον z-indexδεν ορίστηκε, θα έχει μια προεπιλεγμένη τιμή auto. Αυτό είναι αποτέλεσμα:

Μια εικόνα τριών κουτιών

Προσπαθήστε να αλλάξετε τη σειρά σε πράσινο, μπλε, κόκκινο σε CSS χρησιμοποιώντας z-index.

#blue { background-color: blue; z-index: 2; } #red { background-color: red; z-index: 1; } #green { background-color: green; z-index: 3; }

Το αποτέλεσμα θα είναι:

Μια εικόνα τριών κουτιών

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

#background { z-index: -1; }