Z-δείκτης
Αν και δεν αποτελούν μέρος του συστήματος πλέγματος του Bootstrap, οι δείκτες z παίζουν σημαντικό ρόλο στον τρόπο επικάλυψης και αλληλεπίδρασης των στοιχείων μας μεταξύ τους.
Πολλά στοιχεία Bootstrap χρησιμοποιούν z-indexτην ιδιότητα CSS που βοηθά στον έλεγχο της διάταξης παρέχοντας έναν τρίτο άξονα για την τακτοποίηση περιεχομένου. Χρησιμοποιούμε μια προεπιλεγμένη κλίμακα z-index στο Bootstrap που έχει σχεδιαστεί για να στρώνει σωστά την πλοήγηση, τις συμβουλές εργαλείων και τα popover, τα modals και πολλά άλλα.
Αυτές οι υψηλότερες τιμές ξεκινούν από έναν αυθαίρετο αριθμό, αρκετά υψηλό και συγκεκριμένο ώστε ιδανικά να αποφεύγονται οι συγκρούσεις. Χρειαζόμαστε ένα τυπικό σύνολο από αυτά στα πολυεπίπεδα στοιχεία μας—επεξηγήσεις εργαλείων, popovers, γραμμές πλοήγησης, αναπτυσσόμενα μενού, modals— ώστε να μπορούμε να είμαστε αρκετά συνεπείς στις συμπεριφορές. Δεν υπάρχει λόγος να μην μπορούσαμε να χρησιμοποιήσουμε 100+ ή 500+.
Δεν ενθαρρύνουμε την προσαρμογή αυτών των μεμονωμένων τιμών. Αν αλλάξετε ένα, πιθανότατα πρέπει να τα αλλάξετε όλα.
$zindex-dropdown: 1000;
$zindex-sticky: 1020;
$zindex-fixed: 1030;
$zindex-modal-backdrop: 1040;
$zindex-offcanvas: 1050;
$zindex-modal: 1060;
$zindex-popover: 1070;
$zindex-tooltip: 1080;
Για να χειριστούμε επικαλυπτόμενα περιγράμματα εντός στοιχείων (π.χ. κουμπιά και εισόδους σε ομάδες εισόδου), χρησιμοποιούμε χαμηλές μονοψήφιες z-indexτιμές 1, 2, και 3για προεπιλεγμένες καταστάσεις, αιώρηση και ενεργές καταστάσεις. Όταν τοποθετείτε το δείκτη του ποντικιού/εστίαση/ενεργό, φέρνουμε ένα συγκεκριμένο στοιχείο στο προσκήνιο με υψηλότερη z-indexτιμή για να δείξουμε τα σύνορά του πάνω από τα αδερφικά στοιχεία.