Pozycjonowanie elementów w CSS

Pozycjonowanie to mechanizm, który pozwala kontrolować dokładne położenie elementów na stronie. Dzięki niemu możemy tworzyć układy, nakładać elementy na siebie, tworzyć nagłówki „przyklejone” do góry czy układy kart.

1. Właściwość `position`

Każdy element w CSS może mieć jedną z pięciu podstawowych wartości position:

a) static (domyślne)

Elementy są rozmieszczane zgodnie z normalnym przepływem dokumentu.
Właściwości top, right, bottom, left nie działają.

Używane zawsze, gdy nie zdefiniujemy innego pozycjonowania.

b) relative

Element pozostaje w normalnym przepływie dokumentu, ale można go przesunąć względem swojego pierwotnego położenia (top, left, right, bottom).
Przesunięcie nie wpływa na inne elementy – zajmują one miejsce tak, jakby element nie był przesunięty.

Często używany jako kontener odniesienia dla elementów absolutnie pozycjonowanych.

c) absolute

Element jest usuwany z normalnego przepływu i pozycjonowany względem najbliższego przodka z position: relative|absolute|fixed|sticky.
Jeśli nie ma takiego przodka → pozycjonowany względem całej strony (<html>).

Przydatny w tworzeniu warstw, wysuwanych menu, tooltipów.

d) fixed

Podobny do absolute, ale element jest zawsze przyklejony do okna przeglądarki.
Nie przesuwa się podczas przewijania strony.

Najczęściej używane do nagłówków sticky, pasków bocznych, przycisków „scroll to top”.

e) sticky

Łączy cechy relative i fixed.
Element zachowuje się jak relative, dopóki nie osiągnie określonego punktu przewijania → wtedy „przykleja się” i działa jak fixed.

Często stosowany do menu nawigacyjnych i nagłówków tabel.

2. `z-index` i nakładanie się elementów

a) Czym jest `z-index`?

Określa kolejność nakładania się elementów (oś Z).
Większa wartość → element jest na wierzchu.

b) Zasady działania

Działa tylko na elementach z position różnym od static.
Wartości mogą być dodatnie, ujemne lub 0.
Tworzenie kontekstu stosu (stacking context) – np. position, opacity < 1, transform, filter mogą utworzyć nowy kontekst, w którym z-index działa niezależnie.

3. Floats i clearfix

a) Float

float pierwotnie używany był do opływania obrazków przez tekst, a później do tworzenia całych layoutów (dziś głównie zastąpione przez flexbox i grid).

Obrazek „odpływa” do lewej strony, a tekst opływa go z prawej.

Możliwe wartości:

left – przesunięcie do lewej,
right – przesunięcie do prawej,
none – brak,
inline-start, inline-end – wartości kierunkowe (w zależności od języka pisma).

b) Problem z floatami

Jeśli elementy są „wynoszone” z przepływu przez float, rodzic może się „zapadać” (jego wysokość nie obejmuje dzieci).

c) Clearfix

Aby rodzic „objął” elementy z float, stosuje się clearfix. Przykład:

Dodaje ukryty element po floatujących dzieciach, który „czyści” floaty i przywraca prawidłowy przepływ.