Positions w CSS
- 2026-02-03, 18:38
- by Michal Boniarczyk
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.
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.
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.
Karta produktu
Ten opis układa się normalnie. Badge jest na wierzchu i nie “pcha” treści.
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.
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.
Przykład widoczny
Przewiń w dół strony: ten nagłówek sekcji przykleja się do góry i trzyma aż do końca sekcji.
To jest mały kontener z własnym scrollem. Sticky działa w obrębie tego kontenera.
Przewijaj dalej, żeby zobaczyć, jak pasek zostaje na górze.
Treść przykładowa: lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.
Wypełniacz do scrolla tej sekcji
Przewijaj stronę — nagłówek tej sekcji pozostanie przyklejony u góry.
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