Pozycjonowanie: relative, absolute, fixed, sticky

Domyślnie elementy podążają za normalnym przepływem dokumentu: elementy blokowe układają się pionowo, a elementy liniowe płyną poziomo w obrębie tekstu. Właściwość position pozwala wyjść poza ten przepływ, aby tworzyć nakładki, stałe nagłówki i podpowiedzi.

Każdy element rozpoczyna działanie z wartością position: static. Oznacza to, że jest pozycjonowany zgodnie z normalnym przepływem dokumentu. Właściwości top, right, bottom i left nie mają wpływu na elementy statyczne.

position: relative pozostawia element w normalnym przepływie, ale pozwala przesunąć go względem pierwotnej pozycji za pomocą właściwości top, right, bottom i left. Co najważniejsze, tworzy ono kontekst pozycjonowania dla elementów potomnych pozycjonowanych absolutnie.

position: absolute usuwa element z normalnego przepływu. Jest on pozycjonowany względem najbliższego pozycjonowanego przodka (dowolnego, którego pozycja różni się od static). Jeśli nie istnieje żaden pozycjonowany przodek, element jest pozycjonowany względem viewportu.

Elementy pozycjonowane mogą na siebie nachodzić. Użyj z-index, aby kontrolować kolejność warstw. Wyższa wartość z-index oznacza wyższą warstwę. Działa to tylko w przypadku elementów pozycjonowanych (nie static). Tworzy nowy kontekst stosu.

position: fixed usuwa element z normalnego przepływu i przypina go do viewportu. Nie przewija się on razem ze stroną. To idealne rozwiązanie dla przyklejonych nagłówków, pływających przycisków akcji i banerów z informacją o plikach cookie.

position: sticky to rozwiązanie hybrydowe: element przewija się razem ze stroną, dopóki nie osiągnie wartości progowej (ustawianej za pomocą top/bottom), a następnie przykleja się. Przydaje się w przypadku nagłówków sekcji w długich tabelach lub pasków bocznych, które przyklejają się po przewinięciu za nagłówek.

Klasyczna technika: połączenie position: absolute; top: 50%; left: 50% z transform: translate(-50%, -50%) pozwala idealnie wyśrodkować element w jego pozycjonowanym elemencie nadrzędnym.

Absolutnie pozycjonowany element potomny może domyślnie wykraczać poza granice elementu nadrzędnego. Dodanie do elementu nadrzędnego overflow: hidden przycina wszystko poza jego obszarem — przydaje się to w efektach dotyczących obrazów na kartach oraz przycinaniu odznak.

Niektóre właściwości nieumyślnie tworzą konteksty stosu: transform, filter, isolation: isolate. Może to prowadzić do walk z z-index, w których element z z-index: 9999 nadal znajduje się za innym, ponieważ jest wewnątrz kontekstu stosu o niższym poziomie.

relative: przesunięcia i kontekst pozycjonowania. absolute: odznaki, podpowiedzi i nakładki względem elementu nadrzędnego. fixed: stale widoczne nagłówki, okna modalne i powiadomienia toast. sticky: nagłówki sekcji oraz nawigacja na pasku bocznym, która podąża za przewijaniem. Unikaj używania position do tworzenia układów — używaj Flex lub Grid.

Element ma ustawienia position: absolute; top: 0; right: 0;. Gdzie się pojawi, jeśli jego element nadrzędny ma ustawienie position: relative?

static to ustawienie domyślne. relative przesuwa element bez usuwania go z przepływu i tworzy kontekst pozycjonowania. absolute usuwa element z przepływu i pozycjonuje go względem najbliższego pozycjonowanego przodka. fixed przykleja element do viewportu. sticky przewija element, a następnie go przykleja. Używaj z-index do kontrolowania kolejności nachodzenia elementów.