Η ιδιότητα Position

Καθορίζει τη θέση ενός στοιχείου μέσα στη σελίδα. 

Μπορεί να πάρει τις τιμές: static, relative, absolute και fixed.

Ας δούμε μία μία τις τιμές και σε τι διαφέρουν.

  • Static

Είναι η προεπιλεγμένη τιμή τοποθέτησης ενός στοιχείου. Δε χρειάζεται να την ορίσουμε. 

  • Relative

Το στοιχείο τοποθετείται ως προς την static θέση του, πιο πάνω, ή πιο κάτω, ή πιο αριστερά κλπ. Αυτό το ορίζουμε με τις τιμές top, left, bottom, right. Για παράδειγμα, αν ορίσουμε top:30px το στοιχείο θα τοποθετηθεί σε απόσταση 30px από την κορυφή (δηλαδή θα μετακινηθεί πιο κάτω). Τα υπόλοιπα στοιχεία θα τοποθετηθούν σαν να ήταν το στοιχείο στη static θέση!

  • Absolute

Το στοιχείο τοποθετείται στην επάνω αριστερή γωνία του πιο κοντινού προγόνου που δεν είναι static. Το πώς ακριβώς θα τοποθετηθεί το ορίζουμε με τις τιμές top, left, bottom, right. Τα υπόλοιπα στοιχεία θα τοποθετηθούν σαν να μην υπάρχει το στοιχείο αυτό!

  • Fixed

Το στοιχείο τοποθετείται στην επάνω αριστερή γωνία της σελίδας. Το μετακινούμε σε άλλη θέση με τις τιμές top, left, bottom, right. Τα υπόλοιπα στοιχεία θα τοποθετηθούν σαν να μην υπάρχει το στοιχείο αυτό!  Το στοιχείο δεν μετακινείται με την κύλιση της σελίδας!