position ελέγχει τον τρόπο τοποθέτησης ενός στοιχείου και εάν ισχύουν οι ιδιότητες offset (top/right/bottom/left).
css
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute τοποθετεί ένα στοιχείο σχετικά με τον πλησιέστερο τοποθετημένο πρόγονό του (ό,τι άλλο εκτός από static). Ορίζετε λοιπόν position: relative σε ένα γονικό στοιχείο για να το κάνετε σημείο αναφοράς:
.card {
position: relative; /* becomes the positioning context */
}
.badge {
position: absolute; /* positioned relative to .card */
top: 8px;
right: 8px; /* pins the badge to the card's top-right corner */
}
Αυτό το μοτίβο relative-parent / absolute-child είναι παντού: badges, dropdowns, tooltips, κουμπιά κλεισίματος.
.navbar { position: fixed; top: 0; } /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
top: 0), στη συνέχεια παραμένει εκεί ενώ το δοχείο του είναι σε προβολή – εξαιρετικό για κεφαλίδες ενοτήτων.Τα στοιχεία absolute/fixed αφαιρούνται από τη φυσική ροή, επομένως δεν δεσμεύουν χώρο – τα αδέλφια στοιχεία συμπεριφέρονται σαν να μην υπάρχουν, το οποίο μπορεί να προκαλέσει επικάλυψη. Σχεδιάστε για αυτό (π.χ. προσθέστε padding για αντιστάθμιση μιας fixed navbar).
position είναι απαραίτητη για overlays, sticky headers, modals, dropdowns και badges.
Ο σχηματισμός relative-parent/absolute-child και η διάκριση fixed-vs-sticky είναι ο πρακτικός πυρήνας που χρησιμοποιείτε συνεχώς.