Τοποθέτηση επικαλυπτόμενων στοιχείων με φύλλα στυλ Cascading
Μία από τις προκλήσεις κατά τη χρήση της τοποθέτησης CSS για τη διάταξη ιστοσελίδας είναι ότι ορισμένα από τα στοιχεία σας μπορεί να αλληλεπικαλύπτονται με άλλα. Αυτό λειτουργεί καλά αν θέλετε το τελευταίο στοιχείο της HTML να είναι στην κορυφή, αλλά τι γίνεται αν δεν το κάνετε ή τι θέλετε αν θέλετε να έχετε στοιχεία που επί του παρόντος δεν αλληλεπικαλύπτονται με άλλους, επειδή το σχέδιο απαιτεί αυτό το "layered" look ; Για να αλλάξετε τον τρόπο αλληλεπικάλυψης των στοιχείων, πρέπει να χρησιμοποιήσετε την ιδιότητα του CSS.
Εάν έχετε χρησιμοποιήσει εργαλεία γραφικών σε Word και PowerPoint ή πιο ισχυρό επεξεργαστή εικόνας, όπως το Adobe Photoshop, τότε πιθανότατα έχετε δει κάτι σαν το z-index σε δράση. Σε αυτά τα προγράμματα, μπορείτε να επισημάνετε τα αντικείμενα που έχετε σχεδιάσει και να επιλέξετε μια επιλογή "Αποστολή προς τα πίσω" ή "Φέρτε προς τα εμπρός" ορισμένα στοιχεία του εγγράφου σας. Στο Photoshop, δεν έχετε αυτές τις λειτουργίες, αλλά έχετε το παράθυρο "Layer" του προγράμματος και μπορείτε να κανονίσετε πού ένα στοιχείο πέφτει στον καμβά αναδιατάσσοντας αυτά τα επίπεδα. Και στα δύο αυτά παραδείγματα, ρυθμίζετε ουσιαστικά τον z-δείκτη αυτών των αντικειμένων.
Τι είναι ο δείκτης z;
Όταν χρησιμοποιείτε την τοποθέτηση CSS για να τοποθετήσετε στοιχεία στη σελίδα, πρέπει να σκεφτείτε σε τρεις διαστάσεις. Υπάρχουν οι δύο βασικές διαστάσεις: αριστερά / δεξιά και πάνω / κάτω. Ο δείκτης από αριστερά προς τα δεξιά είναι γνωστός ως δείκτης x, ενώ ο κορυφαίος προς τα κάτω ένας είναι ο δείκτης y. Έτσι θα τοποθετούσατε τα στοιχεία οριζόντια ή κάθετα, χρησιμοποιώντας αυτά τα δύο ευρετήρια.
Όταν έρχεται στο web design, υπάρχει και η σειρά στοίβαξης της σελίδας. Κάθε στοιχείο στη σελίδα μπορεί να στοιβάζεται πάνω ή κάτω από οποιοδήποτε άλλο στοιχείο. Η ιδιότητα z-index καθορίζει το πού βρίσκεται στη στοιβάδα κάθε στοιχείο. Εάν ο δείκτης x και ο δείκτης y είναι οι οριζόντιες και κάθετες γραμμές, τότε ο z-index είναι το βάθος της σελίδας, ουσιαστικά η 3η διάσταση.
Μου αρέσει να σκέφτομαι τα στοιχεία σε μια ιστοσελίδα ως κομμάτια χαρτιού, και η ίδια η ιστοσελίδα ως κολάζ. Όπου βάζω το χαρτί καθορίζεται από την τοποθέτηση και πόσο καλύπτεται από τα άλλα στοιχεία είναι ο δείκτης z.
Ο δείκτης z είναι ένας αριθμός, είτε θετικός (π.χ. 100) είτε αρνητικός (π.χ. -100). Ο προεπιλεγμένος z-δείκτης είναι 0. Το στοιχείο με το υψηλότερο δείκτη z είναι στην κορυφή, ακολουθούμενο από το επόμενο υψηλότερο και ούτω καθεξής κάτω στο χαμηλότερο z-δείκτη. Εάν δύο στοιχεία έχουν την ίδια τιμή z-index (ή δεν έχει οριστεί, δηλαδή η χρήση της προεπιλεγμένης τιμής 0), το πρόγραμμα περιήγησης θα τα στρώσει με τη σειρά που εμφανίζονται στο HTML.
Πώς να χρησιμοποιήσετε το z-index
Δώστε σε κάθε στοιχείο που θέλετε στη στοίβα σας διαφορετική τιμή z-index. Για παράδειγμα, εάν έχω πέντε διαφορετικά στοιχεία:
- στοιχείο 1 - δείκτης z από -25
- στοιχείο 2 - δείκτης z των 82
- στοιχείο 3 - ο δείκτης z δεν έχει οριστεί
- στοιχείο 4 - δείκτης z των 10
- στοιχείο 5 - δείκτης z από -3
Θα στοιβάζονται με την ακόλουθη σειρά:
- στοιχείο 2
- στοιχείο 4
- στοιχείο 3
- στοιχείο 5
- στοιχείο 1
Σας προτείνω να χρησιμοποιήσετε πολύ διαφορετικές τιμές z-index για να στοιβάζετε τα στοιχεία σας. Με αυτόν τον τρόπο, αν προσθέσετε περισσότερα στοιχεία στη σελίδα αργότερα, έχετε χώρο για να τα στρώσετε χωρίς να χρειάζεται να προσαρμόσετε τις τιμές του δείκτη z όλων των άλλων στοιχείων. Για παράδειγμα:
- 100 για το πιο πάνω στοιχείο μου
- 0 για το μέσο στοιχείο μου
- -100 για το κάτω στοιχείο μου
Μπορείτε επίσης να δώσετε σε δύο στοιχεία την ίδια τιμή δείκτη z. Αν αυτά τα στοιχεία στοιβάζονται, θα εμφανίζονται με τη σειρά που γράφονται στην HTML, με το τελευταίο στοιχείο στην κορυφή.
Μια σημείωση, για να χρησιμοποιήσετε αποτελεσματικά την ιδιότητα z-index, πρέπει να είναι ένα στοιχείο επίπεδο μπλοκ ή να χρησιμοποιήσετε μια εμφάνιση "block" ή "inline-block" στο αρχείο CSS.
Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο στις 12/09/16 από τον Jeremy Girard.