Pozycjonowanie: relative, absolute, fixed i sticky

Cele lekcji

Po ukończeniu tej lekcji będziesz umieć:

• odróżnić normalny przepływ dokumentu od pozycjonowania,
• użyć position: relative jako punktu odniesienia dla elementu absolutnego,
• umieścić badge lub etykietę przez position: absolute,
• wyjaśnić, kiedy stosować fixed, a kiedy sticky,
• bezpiecznie korzystać z offsetów top, right, bottom i left.

Kontekst praktyczny

Pozycjonowanie przydaje się w konkretnych sytuacjach: badge „Nowe” na karcie, przyklejony header, pasek postępu, floating action button, tooltip, dropdown, panel sticky albo etykieta w rogu miniatury.

Normalny flow a pozycjonowanie

Normalny flow to domyślny sposób układania elementów: blok po bloku, od góry do dołu, zgodnie ze strukturą HTML. Pozycjonowanie pozwala elementowi częściowo albo całkowicie wyjść poza ten zwykły przepływ.

To duża moc, ale też częste źródło błędów. Jeśli użyjesz pozycjonowania do problemu, który powinien rozwiązać Grid albo Flexbox, layout szybko stanie się trudny do utrzymania.

position: relative

relative zostawia element w normalnym przepływie, ale pozwala go przesunąć względem jego pierwotnego miejsca. Bardzo często używa się go także jako punktu odniesienia dla dziecka z position: absolute.

.card {
  position: relative;
}

Samo position: relative nie zmieni wyglądu elementu. Zmiana pojawi się dopiero po dodaniu offsetów albo po osadzeniu wewnątrz elementu absolutnego.

position: absolute

absolute wyjmuje element z normalnego przepływu i ustawia go względem najbliższego pozycjonowanego przodka. W praktyce oznacza to zwykle: rodzic ma position: relative, a dziecko ma position: absolute.

.card {
  position: relative;
}

.card__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

To klasyczny wzorzec dla badge’y, etykiet w rogu zdjęcia, ikon zamknięcia modala albo małych dekoracyjnych elementów w komponencie.

position: fixed

fixed przypina element względem viewportu, czyli widocznego obszaru przeglądarki. Element pozostaje w tym samym miejscu podczas przewijania strony.

.progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

W tym projekcie pasek postępu lekcji używa właśnie takiego podejścia. fixed dobrze pasuje do elementów globalnych, ale może zasłaniać treść, jeśli nie zaplanujesz miejsca i warstw.

position: sticky

sticky łączy zachowanie normalnego elementu i elementu przyklejonego. Element przewija się razem z treścią, dopóki nie osiągnie podanego offsetu, np. top: 1rem. Potem zostaje przyklejony w tej pozycji.

.lesson-sidebar {
  position: sticky;
  top: 1rem;
}

To dobry wzorzec dla spisu treści, paneli filtrów i bocznych podsumowań, które mają pozostać pod ręką podczas przewijania dłuższej strony.

top, right, bottom, left

Offsety określają odległość pozycjonowanego elementu od wybranej krawędzi jego punktu odniesienia. Same nie wystarczą: działają dopiero wtedy, gdy element ma pozycję inną niż domyślne static.

• top odsuwa element od górnej krawędzi punktu odniesienia.
• right odsuwa element od prawej krawędzi.
• bottom odsuwa element od dolnej krawędzi.
• left odsuwa element od lewej krawędzi.

Badge „Nowe” na karcie

Poniższy przykład pokazuje najczęstszy praktyczny duet: rodzic z position: relative i etykieta z position: absolute.

Kopiuj<article class="course-card">
  <span class="course-card__badge">Nowe</span>
  <h2>Pozycjonowanie w CSS</h2>
  <p>Naucz się osadzać elementy w konkretnym rogu komponentu.</p>
</article>

.course-card {
  position: relative;
  padding: 1.5rem;
  border: 1px solid #dbe2f1;
  border-radius: 12px;
  background-color: #ffffff;
}

.course-card__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

Interpretacja: badge nie zajmuje miejsca w normalnym układzie treści karty. Jest warstwą osadzoną w prawym górnym rogu.

Sticky panel w praktyce

W długich widokach przydaje się mały panel, który pozostaje widoczny podczas przewijania swojej sekcji. Poniższy przykład pokazuje uproszczony układ z panelem sticky i treścią obok.

Kopiuj<aside class="summary-panel">
  <h2>W tej sekcji</h2>
  <p>Najważniejsze punkty zostają pod ręką.</p>
</aside>

.summary-panel {
  position: sticky;
  top: 1rem;
}

Sticky działa w granicach swojego kontenera. Jeśli rodzic jest zbyt niski albo ma nieoczekiwany overflow, efekt może wyglądać inaczej niż zakładasz.

Najczęstsze błędy początkujących

• Ustawianie top albo right bez ustawienia position.
• Zapominanie o position: relative na rodzicu elementu absolutnego.
• Budowanie całych layoutów przez absolute zamiast użycia normalnego flow, Flexboxa albo Grida.
• Używanie fixed bez sprawdzenia, czy element nie zasłania treści na małym ekranie.
• Oczekiwanie, że sticky zadziała zawsze, bez sprawdzenia wysokości rodzica i kontekstu przewijania.

Mini zadanie

Dodaj badge „Nowe” w prawym górnym rogu karty oraz sticky panel z krótkim podsumowaniem sekcji.

• Utwórz kartę z nagłówkiem, opisem i etykietą Nowe.
• Na karcie ustaw position: relative.
• Na etykiecie ustaw position: absolute, top i right.
• Dodaj panel boczny albo małe podsumowanie z position: sticky i top: 1rem.
• Przewiń stronę i sprawdź, czy sticky zachowuje się zgodnie z oczekiwaniem.

Checklista

• Wiem, czym normalny flow różni się od pozycjonowania.
• Potrafię użyć position: relative jako kontekstu dla elementu absolutnego.
• Umiem osadzić badge w rogu karty przez absolute, top i right.
• Rozumiem, że fixed odnosi się do viewportu.
• Wiem, że sticky wymaga offsetu i działa w granicach swojego kontenera.
• Nie używam pozycjonowania jako zamiennika dla Flexboxa i Grida.

Podsumowanie lekcji

Pozycjonowanie daje precyzyjną kontrolę nad wybranymi elementami interfejsu. relative często tworzy punkt odniesienia, absolute osadza element w komponencie, fixed przypina element do viewportu, a sticky pozwala panelowi przykleić się podczas przewijania.

Kolejny krok to warstwy i nakładanie: z-index, overlay, modal i kontekst stosu.