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