position

Wybiera sposób pozycjonowania elementu: w przepływie, względnie, absolutnie, na stałe lub przyklejony.

Wartość domyślna: static
Dziedziczona: Nie
Animowalna: nie
Dotyczy: wszystkie elementy
JavaScript: element.style.position = "absolute"

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Wartości
Wartości w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

CSS

.card {
  position: relative;
}

.card .badge {
  position: absolute;
  top: 12px;
  right: 12px;
}

Podgląd

Definicja i zastosowanie

Właściwość position decyduje, jak liczone jest położenie elementu. Domyślnie (static) element stoi tam, gdzie wypada w normalnym przepływie strony, a właściwości top, left i podobne nic nie robią.

relative przesuwa element względem jego zwykłego miejsca, które nadal pozostaje zarezerwowane. absolute wyjmuje element z przepływu i ustawia go względem najbliższego przodka z pozycjonowaniem. fixed przypina element do okna przeglądarki, więc nie przewija się ze stroną.

sticky łączy zachowania: element płynie normalnie, dopóki przy przewijaniu nie dotrze do progu ustawionego na przykład przez top: 0. Wtedy się przykleja, ale tylko w obrębie swojego rodzica.

Składnia

position: static | relative | absolute | fixed | sticky;

Wartości

static
Zwykły przepływ. top i left z demo są ignorowane.
relative
Element przesuwa się o 30px w dół i w prawo, a jego pierwotne miejsce zostaje puste.
absolute
Element wypada z przepływu (element 3 zajmuje jego miejsce) i staje względem pozycjonowanego przodka.
fixed
Element przypina się do okna. Tu oknem jest ramka podglądu.
sticky
Przewiń listę w podglądzie: nagłówek przykleja się do górnej krawędzi pojemnika.

Wartość	Opis
static	Zwykły przepływ. `top` i `left` z demo są ignorowane.
relative	Element przesuwa się o 30px w dół i w prawo, a jego pierwotne miejsce zostaje puste.
absolute	Element wypada z przepływu (element 3 zajmuje jego miejsce) i staje względem pozycjonowanego przodka.
fixed	Element przypina się do okna. Tu oknem jest ramka podglądu.
sticky	Przewiń listę w podglądzie: nagłówek przykleja się do górnej krawędzi pojemnika.

Wartości w praktyce

static

Zwykły przepływ. top i left z demo są ignorowane.

.demo { position: static; }

relative

Element przesuwa się o 30px w dół i w prawo, a jego pierwotne miejsce zostaje puste.

.demo { position: relative; }

absolute

Element wypada z przepływu (element 3 zajmuje jego miejsce) i staje względem pozycjonowanego przodka.

.area { position: relative; }
.demo { position: absolute; }

fixed

Element przypina się do okna. Tu oknem jest ramka podglądu.

.demo { position: fixed; }

sticky

Przewiń listę w podglądzie: nagłówek przykleja się do górnej krawędzi pojemnika.

.demo { position: sticky; top: 0; }

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Element z absolute ustawia się względem najbliższego przodka, który ma position inne niż static. Najczęściej dodaje się rodzicowi position: relative.
sticky nie działa, gdy któryś przodek ma overflow: hidden, albo gdy nie podasz progu, na przykład top: 0.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz CSS w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs