Διαχείριση του Z-index στον κωδικό σας - dummies

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

Βάθος χειρισμού σε CSS

Μπορείτε να χρησιμοποιήσετε ένα ειδικό χαρακτηριστικό CSS που ονομάζεται z-index για να αλλάξετε αυτήν την προεπιλεγμένη συμπεριφορά. Η τιμή z αναφέρεται στο πόσο κοντά ένα στοιχείο εμφανίζεται στον θεατή. Αυτή η εικόνα δείχνει πώς λειτουργεί αυτό.

Το z-index σας επιτρέπει να αλλάξετε ποια στοιχεία εμφανίζονται πιο κοντά στον χρήστη.

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

Εδώ είναι ο κώδικας που απεικονίζει το εφέ z-index :

zindex. html

#blueBox {

χρώμα φόντου: μπλε;

πλάτος: 100px;

ύψος: 100px;

θέση: απόλυτη;

αριστερά: 0px;

κορυφή: 0px;

περιθώριο: 0px;

z-δείκτης: 1;

}

#blackBox {

χρώμα φόντου: μαύρο;

πλάτος: 100px;

ύψος: 100px;

θέση: απόλυτη;

αριστερά: 50px;

κορυφή: 50px;

περιθώριο: 0px;

}

Εργασία με z-index

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

Εδώ είναι μερικά πράγματα που πρέπει να θυμάστε όταν χρησιμοποιείτε z-index :

• Ένα στοιχείο μπορεί να αποκρύψει εντελώς ένα άλλο. Όταν ξεκινάτε να τοποθετείτε τα πράγματα απολύτως, ένα στοιχείο φαίνεται να εξαφανίζεται επειδή καλύπτεται εντελώς από ένα άλλο. Το χαρακτηριστικό z-index είναι ένας καλός τρόπος για να ελέγξετε αυτήν την κατάσταση.
• Αρνητικό z-δείκτης μπορεί να είναι προβληματικό. Η τιμή για το z-δείκτης πρέπει να είναι θετική. Παρόλο που υποστηρίζονται αρνητικές τιμές, ορισμένα προγράμματα περιήγησης (κυρίως παλαιότερες εκδόσεις του Firefox) δεν τα χειρίζονται καλά και μπορεί να προκαλέσουν εξαφάνιση του στοιχείου σας.
• Ίσως είναι καλύτερο να δώσετε όλες τις τιμές z-index . Εάν καθορίσετε το z-index για ορισμένα στοιχεία και αφήστε το z-index undefined για άλλους, δεν έχετε καμία εγγύηση τι ακριβώς θα συμβεί. Σε περίπτωση αμφιβολίας, απλά δίνετε κάθε αξία στο δικό της z-index , και θα ξέρετε ακριβώς τι πρέπει να επικαλύπτει τι.
• Μην δίνετε σε δύο στοιχεία τον ίδιο z-δείκτη . Το σημείο του z-index είναι να καθορίσετε σαφώς ποιο στοιχείο θα πρέπει να εμφανίζεται πιο κοντά. Μην παραβιάζετε αυτόν τον σκοπό αναθέτοντας την ίδια τιμή z-index σε δύο διαφορετικά στοιχεία στην ίδια σελίδα.