Koje su CSS position vrijednosti?

Question

Accepted Answer

`position` kontrolira kako se element postavlja i primjenjuju li se svojstva pomaka (`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: ključno uparivanje

`absolute` postavljuje element relative u odnosu na njegovog **najbližeg pozicioniranog pretka** (bilo šta osim `static`). Zato postavljate `position: relative` na roditelja da bi bilo referentna točka:

```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 */
}
```

Ovaj uzorak relative-roditelja / absolute-djeteta je svugdje: značke, padajući izbornici, savjeti, dugmadi za zatvaranje.

## 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** — zaključan na viewport (uvijek vidljiv), npr. trajni navbar.
- **sticky** — ponašanje kao relative dok ne pogodi prag (`top: 0`), zatim ostaje tamo dok je njegov spremniku vidljiv — odličan za zaglavlje odjeljenja.

## Česta greška

Elementi `absolute`/`fixed` su **uklonjeni iz normalnog toka**, pa ne rezerviraju prostor — braća i sestre ponašaju se kao da nisu tu, što može uzrokovati preklapanje. Planirajte to (npr. dodajte padding da kompenzujete fixed navbar).

## Zašto je važno

`position` je bitan za overlay-e, sticky zaglavlja, modale, padajuće izbornike i značke.

Relationship relative-roditelja/absolute-djeteta i razlika fixed-vs-sticky su praktična srž koju stalno koristite.