Jakie są wartości CSS position?

Question

Accepted Answer

`position` kontroluje, jak element jest umieszczony i czy obowiązują właściwości przesunięcia (`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: kluczowa para

`absolute` umieszcza element względem jego **najbliższego przodka, który jest ustawiony** (cokolwiek innego niż `static`). Ustawiasz `position: relative` na rodzicu, aby uczynić go punktem odniesienia:

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

Ten wzorzec relative-parent / absolute-child pojawia się wszędzie: odznaki, menu rozwijane, podpowiedzi, przyciski zamknięcia.

## 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** — zablokowane do okienka przeglądarki (zawsze widoczne), np. trwały pasek nawigacji.
- **sticky** — zachowuje się jak relative, aż do osiągnięcia progu (`top: 0`), a następnie pozostaje tam, gdy jego kontener jest widoczny — świetne dla nagłówków sekcji.

## Częsta pułapka

Elementy `absolute`/`fixed` są **usuwane z normalnego przepływu**, więc nie zajmują miejsca — elementy współrodzeńskie zachowują się tak, jakby tam nie było, co może powodować nakładanie się. Zaplanuj to (np. dodaj paddingą, aby zrekompensować stały pasek nawigacji).

## Dlaczego to ważne

`position` jest niezbędna dla nakładek, przylepnych nagłówków, modali, menu rozwijanych i odznak.

Relacja relative-parent/absolute-child i rozróżnienie fixed-versus-sticky to praktyczne jądro, które ciągle używasz.