Ποιες είναι οι επιλογές τοποθέτησης στοιχείων στο CSS;

Υπάρχουν αρκετές βασικές επιλογές για τον προσανατολισμό των στοιχείων σε CSS:

• static — προεπιλεγμένη θέση. Τα στοιχεία τοποθετούνται στη ροή του εγγράφου, χωρίς μετατοπίσεις.
• relative — το στοιχείο τοποθετείται σε σχέση με τη φυσική του θέση. Μπορεί να μετακινηθεί με top, left, bottom, right, διατηρώντας τη θέση του στη ροή.
• absolute — το στοιχείο τοποθετείται σε σχέση με τον πλησιέστερο γονέα με διαφορετική από static θέση (ή σε σχέση με το παράθυρο αν δεν υπάρχει). Βγαίνει από τη ροή.
• fixed — το στοιχείο είναι σταθερό σε σχέση με το παράθυρο του προγράμματος περιήγησης και δεν κινείται κατά την κύλιση. Βγαίνει επίσης από τη ροή.
• sticky — το στοιχείο συμπεριφέρεται ως relative μέχρι να φτάσει σε μια καθορισμένη θέση κατά την κύλιση, μετά συμπεριφέρεται ως fixed.

Εκτός από τον προσανατολισμό, για την τοποθέτηση των στοιχείων συχνά χρησιμοποιούνται:

• Flexbox — ευέλικτο μοντέλο για την ευθυγράμμιση και την κατανομή χώρου μεταξύ στοιχείων σε μία διάσταση (γραμμή ή στήλη).
• Grid — διπλής διάστασης μοντέλο πλέγματος για την τοποθέτηση στοιχείων σε γραμμές και στήλες.
• float — παλαιότερος τρόπος περιτύλιξης στοιχείων, χρησιμοποιούνταν συχνά για τη δημιουργία στηλών, τώρα λιγότερο συχνά.

Παράδειγμα χρήσης του position:

.element {
  position: absolute;
  top: 10px;
  left: 20px;
}