Ποιες ιδιότητες της ιδιότητας position: sticky…

position: sticky – είναι ένα υβρίδιο μεταξύ position: relative και position: fixed.

Προεπιλεγμένη συμπεριφορά: Το στοιχείο συμπεριφέρεται όπως με position: relative, παραμένοντας στη φυσική ροή του εγγράφου.
Κατά την κύλιση: Όταν το στοιχείο φτάσει σε μια καθορισμένη μετατόπιση (π.χ., top: 0) σε σχέση με τον κοντέινερ κύλισης ή την περιοχή ορατότητας (viewport), "κολλάει" και συμπεριφέρεται όπως με position: fixed, παραμένοντας ορατό σε αυτή τη θέση κατά την περαιτέρω κύλιση.
Μετατόπιση: Ορίζεται από τις ιδιότητες top, right, bottom, left. Πρέπει να χρησιμοποιείται τουλάχιστον μία από αυτές για να λειτουργεί σωστά το sticky.
Κοντέινερ κύλισης (scroll container/containing block): Το στοιχείο "κολλάει" εντός των ορίων του γονικού μπλοκ διαμόρφωσης (containing block), που συνήθως αντιστοιχεί στον πλησιέστερο προπάππου με δυνατότητα κύλισης ή σε ένα συγκεκριμένο πλαίσιο διαμόρφωσης. Αν μόνο το body/html κυλίσει, η κολληση θα είναι σε σχέση με την περιοχή ορατότητας.
Επικάλυψη: Το "κολλημένο" στοιχείο μπορεί να επικάλυψει το περιεχόμενο κάτω από αυτό, παρόμοια με ένα στοιχείο με position: fixed.
Z-index: Η συμπεριφορά επικάλυψης επηρεάζεται από την ιδιότητα z-index.
Περιορισμοί:
- Δεν λειτουργεί αν το γονικό στοιχείο έχει overflow: hidden, overflow: auto ή overflow: scroll, που κόβουν το περιεχόμενο.
- Το στοιχείο μπορεί να "αποκολλήσει" αν φτάσει στα όρια του κοντέινερ κύλισης.
Χρήση: Συχνά χρησιμοποιείται για τη δημιουργία "κολλητών" επικεφαλίδων πινάκων, πλαισίων πλοήγησης ή πλαϊνών στοιχείων που παραμένουν ορατά κατά την κύλιση του κύριου περιεχομένου.

/* Παράδειγμα χρήσης */
.sticky-header {
  position: sticky;
  top: 0; /* Κολλάει στην κορυφή του viewport ή του κοντέινερ */
  background-color: white;
  padding: 10px;
  z-index: 10; /* Διασφαλίζει ότι η επικεφαλίδα βρίσκεται πάνω από άλλα περιεχόμενα */
}

Ποιες ιδιότητες της ιδιότητας position: sticky γνωρίζετε;