Position
Με την ιδιότητα position μπορούμε να αποδεσμεύσουμε ένα στοιχείο από την κανονική ροή περιεχομένου που κανονικά θα είχε το στοιχείο.
Οι τιμές για την ιδιότητα position είναι:
- static (προκαθορισμένη τιμή)
- relative
- fixed
- absolute
- sticky
Επειδή με την position μπορούμε να τοποθετήσουμε σε μια απόλυτη ή σχετική θέση το στοιχείο χρησιμοποιούμε συνδυαστικά τις ιδιότητες:
- left
- top
- right
- bottom
Για παράδειγμα:
div { position: absolute; right: 0px; bottom: 0px; }
Η τιμή static
Είναι η προκαθορισμένη τιμή και η θέση της είναι αυτή που θα ήταν αν δεν υπήρχε position. Οι τιμές για left, top, right και bottom δεν έχουν ισχύ.
Η τιμή relative
Η θέση της καθορίζεται από τις τιμές για left, top κλπ. αλλά σε σχέση με τη θέση που θα είχε το στοιχείο αν δεν υπήρχε το position.
Το κενό που θα αφήσει μένει ακάλυπτο.
div { position: relative; left: 30px; border: 3px solid #73AD21; }
Η τιμή fixed
Η θέση της καθορίζεται από τις τιμές για left, top κλπ. αλλά σε σχέση με το viewport. Δηλαδή το στοιχείο δεν μετακινείται με το scroll.
Ο χώρος που θα δέσμευε, καλύπτεται από άλλο περιεχόμενο.
Η τιμή absolute
Η θέση της καθορίζεται από τις τιμές για left, top κλπ. αλλά σε σχέση με το document body.
Ο χώρος που θα δέσμευε, καλύπτεται.
Αν το γονικό στοιχείο έχει position (relative ή absolute), τότε η θέση του ορίζεται με βάση τη θέση του γονικού.
Επειδή το στοιχείο με absolute position αποδεσμεύεται από την κανονική ροή περιεχομένου, μπορεί να κάνει overlap σε άλλα στοιχεία.
Το στοιχείο μετακινείται με το scroll.
Η τιμή sticky
Κάνει εναλλαγή ανάμεσα σε relative και fixed. Εξαρτάται και από τη θέση κύλισης (scroll).
Πρακτικές εφαρμογές
Πρακτικές εφαρμογές για την ιδιότητα position
μπορούμε να έχουμε όπως:
- Dropdown menu
- FAB (Floating Action Button)
- Badge
- Drawer
- Over-topped elements