Πίνακας περιεχομένων:
Βίντεο: Neembuu Uploader - Εγκατάσταση και δημιουργία συντόμευσης 2024
Όταν χρησιμοποιείτε την απόλυτη τοποθέτηση, μπορείτε να προσδιορίσετε ακριβώς πού βρίσκονται τα πράγματα, επομένως είναι πιθανό να επικαλύπτονται. Από προεπιλογή, τα στοιχεία που περιγράφονται αργότερα στο 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
σε δύο διαφορετικά στοιχεία στην ίδια σελίδα.