Pozycjonowanie static i relative

Właściwość position określa sposób umieszczenia elementu w przepływie dokumentu. Dostępnych jest pięć wartości: static, relative, absolute, fixed i sticky.

Każdy element ma domyślnie ustawienie position: static. Elementy statyczne podążają za normalnym przepływem dokumentu — elementy blokowe układają się pionowo, a elementy wierszowe przepływają od lewej do prawej. Właściwości przesunięcia (top, right, bottom, left) nie mają żadnego efektu.

position: relative pozostawia element w normalnym przepływie, ale pozwala przesunąć go względem jego własnej normalnej pozycji za pomocą top, right, bottom i left.

Po użyciu position: relative wraz z przesunięciami element zmienia położenie wizualnie, ale jego pierwotne miejsce w układzie nadal jest zarezerwowane. Inne elementy nie wypełniają powstałej luki.

Właściwości przesunięcia przemieszczają element względem punktu odniesienia:

• top: przesuwa w dół od górnej krawędzi
• left: przesuwa w prawo od lewej krawędzi
• Wartości ujemne odwracają kierunek

z-index działa tylko na elementach pozycjonowanych (nie na statycznych). Jeśli trzeba kontrolować kolejność warstw, należy ustawić co najmniej position: relative.

Najważniejszym zastosowaniem position: relative jest uczynienie elementu blokiem zawierającym dla absolutnie pozycjonowanych elementów potomnych — nawet bez ustawiania wartości przesunięcia.

Połączenie position: relative z transform tworzy nowy kontekst nakładania. Element pozostaje w przepływie, ale można go przekształcać wizualnie.

Należy unikać ustawiania position: relative na każdym elemencie. Tworzy to konteksty nakładania, które mogą komplikować zarządzanie z-index. Należy używać go tylko wtedy, gdy potrzebne są przesunięcia lub zakotwiczenie absolutnie pozycjonowanych elementów potomnych.

Ponieważ pozycjonowanie względne nie wpływa na przepływ układu, można bezpiecznie animować top/left w celu uzyskania efektów wizualnych — jednak animowanie transform: translate() jest wydajniejsze.

W DevTools należy sprawdzić panel Computed, aby zobaczyć efektywną wartość position. Diagram modelu pudełkowego pokazuje dokładne zastosowane współrzędne przesunięcia.

Co dzieje się z miejscem zajmowanym przez element w układzie po zastosowaniu position: relative; top: 20px?

position: static to wartość domyślna — bez przesunięć i bez nakładania. position: relative umożliwia przesuwanie względem własnej pozycji i zachowuje miejsce elementu w układzie. Najważniejszą rolą tej wartości jest działanie jako blok zawierający dla absolutnie pozycjonowanych elementów potomnych.