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