Ποια είναι η διαφορά μεταξύ των διαφορετικών τρόπων…

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

Πίνακας διαφορών:

Ιδιότητα	`static`	`relative`	`absolute`	`fixed`	`sticky`
Ροή εγγράφου	Συνήθης	Διατηρεί	Αφαιρείται	Αφαιρείται	Πρώτα κανονική, μετά αφαιρείται
Μετατόπιση (`top` κ.λπ.)	Όχι	Σε σχέση με τον εαυτό του	Σε σχέση με τον προπάππου/viewport	Σε σχέση με το viewport	Σε σχέση με τον εαυτό του, μετά το viewport
Κατά την κύλιση	Κύλιση	Κύλιση	Παραμένει στη θέση (αν ο προπάππος είναι `fixed`) ή κυλά με τον προπάππο	Παραμένει στη θέση	Πρώτα κυλά, μετά παραμένει στη θέση

Παράδειγμα:

.static-box {
  position: static; /* Προεπιλεγμένη θέση */
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.relative-box {
  position: relative;
  top: 20px; /* Μετατόπιση προς τα κάτω από την κανονική θέση */
  left: 20px; /* Μετατόπιση προς τα δεξιά από την κανονική θέση */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

.absolute-container {
  position: relative; /* Στοιχισμένος προπάππος */
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.absolute-box {
  position: absolute;
  top: 50px; /* Σε σχέση με το κοντέινερ */
  left: 50px; /* Σε σχέση με το κοντέινερ */
  width: 50px;
  height: 50px;
  background-color: lightcoral;
}

.fixed-box {
  position: fixed;
  bottom: 10px; /* Σε σχέση με το παράθυρο προβολής */
  right: 10px; /* Σε σχέση με το παράθυρο προβολής */
  width: 70px;
  height: 70px;
  background-color: lightsalmon;
}

.sticky-header {
  position: sticky;
  top: 0; /* Κολλάει στην κορυφή του viewport */
  height: 50px;
  background-color: lightgoldenrodyellow;
  z-index: 10; /* Για επικάλυψη άλλων στοιχείων κατά το κολλάρισμα */
}

Ποια είναι η διαφορά μεταξύ των διαφορετικών τρόπων τοποθέτησης στοιχείων στο CSS;