Jak działa position (static, relative, absolute, fixed)?

Jak działa position w CSS?

Właściwość position pozwala określić, jak element powinien być rozmieszczony na stronie w odniesieniu do innych elementów lub do okna przeglądarki.

Dzięki niej możesz np. przesunąć element w górę, w bok, ustawić go na stałe w rogu ekranu albo umieścić jeden element na drugim.

W CSS dostępnych jest kilka wartości position. Poznajmy je po kolei wraz z przykładami.

1. static (wartość domyślna)

Każdy element ma domyślnie position: static. Oznacza to, że jest rozmieszczany w standardowym układzie, jeden pod drugim – zgodnie z kolejnością w kodzie HTML.

.element {
  position: static;
}

Uwaga: nie możesz używać top, left itd., gdy element ma static.

2. relative – pozycja względem miejsca początkowego

Element z position: relative zachowuje swoje miejsce w dokumencie, ale możesz go przesunąć względem jego normalnej pozycji, np. o 20px w dół.

.relative-box {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: #ffecb3;
}

<div class="relative-box">To jest przesunięty element (relative)</div>

Efekt:

To jest przesunięty element (relative)

Inne elementy nadal zachowują dla niego miejsce – jego pozycja się przesuwa, ale „układ” nie wie o tym przesunięciu.

3. absolute – pozycja względem najbliższego elementu z position: relative (lub body)

Element z position: absolute jest usuwany z normalnego układu strony i pozycjonowany względem najbliższego elementu nadrzędnego, który ma position: relative.

.kontener {
  position: relative;
  background-color: #e1f5fe;
  padding: 30px;
}

.absolutny {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ff8a65;
  padding: 5px;
}

<div class="kontener">
  To jest kontener (relative)
  <div class="absolutny">Jestem absolutny</div>
</div>

Efekt:

To jest kontener (relative)

Jestem absolutny

Ważne: Jeśli nie ma nadrzędnego elementu z position: relative, to absolute pozycjonuje się względem <body>.

4. fixed – element „przyklejony” do ekranu

fixed oznacza, że element jest zawsze w tym samym miejscu na ekranie – nawet gdy użytkownik przewija stronę.

.fixed-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #c5e1a5;
  padding: 10px;
}

<div class="fixed-box">Jestem przypięty do ekranu (fixed)</div>

Efekt (symulowany – na stronie kursu będzie w rogu):

Jestem przypięty do ekranu (fixed)

Przykłady zastosowania: przycisk „do góry”, pasek cookie, dymek czatu.

🎯 Ćwiczenie w JSFiddle

Wejdź na JSFiddle i wklej ten kod w sekcjach HTML i CSS:

HTML:
<div class="kontener">
  Kontener z relative <div class="absolutny">Absolutny element</div> </div> <div class="fixed-box">Fixed box</div>
CSS:
.kontener {
  position: relative;
  background-color: #e0f7fa;
  padding: 30px;
  margin-bottom: 50px;
}

.absolutny {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ff8a65;
  padding: 5px;
}

.fixed-box {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: #c5e1a5;
  padding: 10px;
}

Kliknij Run, aby zobaczyć efekt działania różnych typów pozycjonowania!

✅ Podsumowanie

  • static – domyślna pozycja, bez przesunięć
  • relative – przesuwa element względem jego pozycji startowej
  • absolute – pozycjonuje element względem najbliższego rodzica z relative
  • fixed – element „przyklejony” do ekranu, nie przewija się

To bardzo przydatna wiedza – teraz wiesz, jak tworzyć elastyczne układy!

W kolejnym temacie nauczysz się ustawiać elementy obok siebie – przy użyciu float i display.

Previous Zagadnienie
Back to Zagadnienie
Next Temat