Care sunt valorile CSS position?

Question

Accepted Answer

`position` controlează cum este plasat un element și dacă se aplică proprietățile de offset (`top`/`right`/`bottom`/`left`).

```css
.a { position: static; }   /* default — normal flow, offsets IGNORED */
.b { position: relative; } /* normal flow, but offsets shift it from itself */
.c { position: absolute; } /* removed from flow, positioned vs nearest positioned ancestor */
.d { position: fixed; }    /* removed from flow, positioned vs the VIEWPORT */
.e { position: sticky; }   /* hybrid: normal until a scroll threshold, then sticks */
```

## relative + absolute: perechea esențială

`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ță:

```css
.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.

## fixed vs sticky

```css
.navbar { position: fixed; top: 0; }   /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
```

- **fixed** — blocat la viewport (întotdeauna vizibil), de ex. o bară de navigație persistentă.
- **sticky** — se comportă relativ până când atinge pragul (`top: 0`), apoi rămâne acolo în timp ce containerul său este în vizualizare — grozav pentru anteturile de secțiuni.

## O capcană comună

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ă).

## De ce este important

`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.