Jaké jsou hodnoty CSS vlastnosti position?

Question

Accepted Answer

`position` určuje, jak se prvek umístí a zda se aplikují offsetové vlastnosti (`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: klíčová kombinace

`absolute` umístí prvek relativně k jeho **nejbližšímu pozicionovanému předchůdci** (cokoliv jiného než `static`). Takže nastavíte `position: relative` na rodičovský prvek, abyste z něj udělali referenční bod:

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

Tento vzor relative-parent / absolute-child je všude: badges, dropdowns, tooltips, tlačítka zavření.

## 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** — uzamčeno na viewport (vždy viditelné), např. trvalý navbar.
- **sticky** — chová se jako relative, dokud nedosáhne prahu (`top: 0`), pak zůstane na místě, pokud je jeho kontejner v zobrazení — skvělé pro záhlaví sekcí.

## Obvyklá chyba

Prvky `absolute`/`fixed` jsou **odstraněny z normálního toku**, takže si nereservují místo — sourozenecké prvky se chovají, jako by tam nebyly, což může způsobit překrytí. Naplánujte na to (např. přidejte padding jako kompenzaci pro fixed navbar).

## Proč je to důležité

`position` je nezbytná pro overlays, sticky headers, modals, dropdowns a badges.

Vztah relative-parent/absolute-child a rozdíl mezi fixed a sticky jsou praktické jádro, které používáte neustále.