position controlează cum este plasat un element și dacă se aplică proprietățile de offset (top/right/bottom/left).
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute pozitionează un element în raport cu cea mai apropiată ancestor care este pozițională (orice altceva decât static). Setezi position: relative pe un părinte pentru a-l face punctul de referință:
.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 */
}
Acest model relative-parent / absolute-child se găsește peste tot: insigne, dropdown-uri, tooltips, butoane de închidere.
.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), apoi rămâne acolo în timp ce containerul său este în vizualizare — grozav pentru anteturile de secțiuni.Elementele absolute/fixed sunt îndepărtate din fluxul normal, deci nu rezervă spațiu — elementele frați se comportă ca și cum nu ar fi acolo, ceea ce poate cauza suprapunere. Planifică pentru asta (de ex. adaugă padding pentru a compensa o navbar fixă).
position este esențial pentru suprapuneri, antetele sticky, modale, dropdown-uri și insigne.
Relația relative-parent/absolute-child și distincția fixed-versus-sticky sunt miezul practic pe care îl folosești constant.