Θέση

Χρησιμοποιήστε αυτά τα βοηθητικά προγράμματα για γρήγορη διαμόρφωση της θέσης ενός στοιχείου.

Κοινές αξίες

Οι τάξεις γρήγορης τοποθέτησης είναι διαθέσιμες, αν και δεν ανταποκρίνονται.

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

Σταθερή κορυφή

Τοποθετήστε ένα στοιχείο στο επάνω μέρος της θύρας προβολής, από άκρη σε άκρη. Βεβαιωθείτε ότι κατανοείτε τις συνέπειες της σταθερής θέσης στο έργο σας. ίσως χρειαστεί να προσθέσετε επιπλέον CSS.

<div class="fixed-top">...</div>

Σταθερός πάτος

Τοποθετήστε ένα στοιχείο στο κάτω μέρος της θύρας προβολής, από άκρη σε άκρη. Βεβαιωθείτε ότι κατανοείτε τις συνέπειες της σταθερής θέσης στο έργο σας. ίσως χρειαστεί να προσθέσετε επιπλέον CSS.

<div class="fixed-bottom">...</div>

Κολλώδες τοπ

Τοποθετήστε ένα στοιχείο στο επάνω μέρος της θύρας προβολής, από άκρη σε άκρη, αλλά μόνο αφού το προσπεράσετε με κύλιση. Το .sticky-topβοηθητικό πρόγραμμα χρησιμοποιεί CSS position: sticky, το οποίο δεν υποστηρίζεται πλήρως σε όλα τα προγράμματα περιήγησης.

Τα IE11 και IE10 θα αποδοθούν position: stickyως position: relative. Ως εκ τούτου, αναδιπλώνουμε τα στυλ σε ένα @supportsερώτημα, περιορίζοντας την κολλητικότητα μόνο σε προγράμματα περιήγησης που μπορούν να το αποδώσουν σωστά.

<div class="sticky-top">...</div>