Post

Positions w CSS

  • 2026-02-03, 18:38
  • by Michal Boniarczyk
Positions w CSS

position: static

Domyślna wartość. Element jest układany normalnie w dokumencie. W praktyce top/right/bottom/left są ignorowane.

Jak działa

  • Element zostaje w normalnym flow.
  • Przesunięcia top/left nie działają.

Do czego używać

  • Standardowe elementy layoutu: sekcje, teksty, listy, karty.

Przykład widoczny

Środkowy box ma ustawione top/left, ale nie zobaczysz przesunięcia.

A
B
C
B: position: static; top: 16px; left: 16px;

position: relative

Element pozostaje w normalnym układzie, ale można go przesunąć względem jego pierwotnej pozycji. Najczęstsze zastosowanie: ustawienie rodzica jako bazy dla potomka z absolute.

Jak działa

  • Element nadal zajmuje miejsce w układzie.
  • top/left przesuwa go wizualnie.

Do czego używać

  • Drobne korekty położenia.
  • Jako “kotwica” dla absolutnie pozycjonowanych elementów wewnątrz komponentu.

Przykład widoczny

Box B jest przesunięty, ale w układzie nadal „zajmuje” swoje pierwotne miejsce.

A
B
C
B: position: relative; top: 14px; left: 14px;

position: absolute

Element wypada z normalnego układu i jest pozycjonowany względem najbliższego przodka, który ma position inne niż static. Najczęściej łączysz: rodzic relative + dziecko absolute.

Jak działa

  • Nie zajmuje miejsca w układzie.
  • Pozycja liczona względem najbliższego nie-static rodzica.

Do czego używać

  • Badge “NEW”, ikony w rogach, overlay w obrębie komponentu.
  • Tooltipy/dropdowny (często z JS).

Przykład widoczny

Badge jest absolutnie przyklejony do rogu karty i nie wpływa na układ tekstu.

NEW

Karta produktu

Ten opis układa się normalnie. Badge jest na wierzchu i nie “pcha” treści.

tag tag tag
Rodzic: relative · Badge: absolute; top/right

position: fixed

Element jest pozycjonowany względem viewportu i nie przewija się razem ze stroną. Jest wyjęty z normalnego układu.

Jak działa

  • Odnoszony do okna przeglądarki (viewport).
  • Nie zajmuje miejsca w układzie.
  • Często wymaga z-index.

Do czego używać

  • Floating button, chat, pasek cookies, stałe CTA.

Przykład widoczny

W prawym dolnym rogu strony masz przycisk fixed. Przewiń — zostaje na miejscu.

Ten przykład działa globalnie na stronie jako przycisk w rogu (zobacz dół po prawej).
Przycisk: position: fixed; right: 16px; bottom: 16px; z-index: 50;

position: sticky

Ten nagłówek jest sticky i przyklei się do góry podczas przewijania tej sekcji.

sticky zachowuje się jak normalny element, dopóki nie dojedziesz do progu top lub bottom. Wtedy “przykleja się”, ale tylko w obrębie kontenera przewijania.

Jak działa

  • Zajmuje miejsce w układzie.
  • Po przekroczeniu progu działa jak “przyklejony”.
  • Przyklejenie obowiązuje w obrębie kontenera.

Do czego używać

  • Nagłówki sekcji, sticky sidebar, nagłówki tabel.

Tabela porównawcza

position Zajmuje miejsce w układzie Względem czego top/left działa Najczęstsze użycie
static tak normalny flow nie standardowy układ strony
relative tak własna pozycja startowa tak korekta + baza dla absolute
absolute nie najbliższy nie-static rodzic tak badge/overlay/ikony w komponencie
fixed nie viewport tak pływające CTA, chat, cookies
sticky tak (do progu) kontener scrolla + próg top/bottom tak sticky header/sidebar/nagłówki tabel

Tags:

  • css
  • css-tips
Error