Η ιδιότητα position
Η ιδιότητα position ορίζει τη θέση ενός στοιχείου σε ένα έγγραφο αλλά και την αποδέσμευσή του από τη ροή του περιεχομένου ή όχι.
Η ιδιότητα position ακολουθείται από τις ιδιότητες left, right, top, bottom με τις οποίες ορίζεται ακριβώς η θέση (συντεταγμένες) του στοιχείου.
Οι τιμές για το position είναι:
- static
- relative
- fixed
- absolute
- sticky
static
Είναι η προκαθορισμένη τιμή και η θέση του στοιχείου είναι αυτή που προβλέπει η ροή του περιεχομένου. Δεν ισχύουν τα left, right, top, bottom.
Δείτε παράδειγμα: static
relative
Ορίζει τη νέα θέση του στοιχείου σε σχέση με την κανονική που θα είχε στη ροή του περιεχομένου. Ο αρχικός χώρος παραμένει δεσμευμένος.
Δείτε παράδειγμα: relative
fixed
Ορίζει τη νέα θέση του στοιχείου σε σχέση με το viewport. Αποδεσμεύεται ο αρχικός χώρος ενώ δεν ακολουθεί την οριζόντια ή κάθετη κύλιση (scrolling) του εγγράφου.
Δείτε παράδειγμα: fixed
absolute
Ορίζει τη νέα θέση του στοιχείου σε σχέση με το viewport. Αποδεσμεύεται ο αρχικός χώρος.
Η θέση του ορίζεται σύμφωνα με το viewport ή το γονικό αρκεί αυτό να είναι positioned.
Δείτε παράδειγμα: absolute
sticky
Συμπεριφέρεται ως relative όσο η θέση του είναι μέσα στο viewport και ως fixed όσο η θέση του είναι εκτός viewport μετά από κάποια κύλιση.
Καλό εφέ για οριζόντια μενού.
Δείτε παράδειγμα: sticky