Pozycjonowanie elementów CSS

Statyczne, względne i absolutne z praktycznymi przykładami · INF.03

Podstawowe typy pozycjonowania

  • static – domyślne, element zajmuje miejsce w normalnym przepływie dokumentu.
  • relative – pozycjonowanie względem własnej pierwotnej pozycji; przesunięcie elementu nie wyjmuje go z przepływu.
  • absolute – element usuwany z normalnego przepływu i pozycjonowany względem najbliższego przodka z inną pozycją (relative, absolute lub fixed).
  • fixed – element przyklejony do okna przeglądarki, zawsze widoczny podczas przewijania.
  • sticky – element zachowuje się jak static, dopóki nie osiągnie określonej pozycji podczas przewijania, wtedy staje się fixed.

Przykład pozycjonowania

.relative-box {
  position: relative;
  top: 10px;
  left: 20px;
  background-color: #cce6ff;
}
.absolute-box {
  position: absolute;
  top: 50px;
  right: 30px;
  background-color: #99ccff;
}

Układ responsywny z pozycjonowaniem

Pozycjonowanie pomaga tworzyć responsywne i elastyczne układy, np. menu stałe, pływające elementy lub nakładające się warstwy.

Warto łączyć z modelem pudełkowym i media queries dla pełnej kontroli.

Ćwiczenia praktyczne

Zadanie: Stwórz dwa bloki, jeden z pozycją relative przesunięty o (top:10px, left:20px), drugi absolutnie w rogu (top:50px, right:30px).
Relative box


Absolute box

Quiz

static
relative
przesunięcie względem własnej pozycji
pozycjonowanie względem rodzica
Usuwa się z przepływu strony
Zachowuje się jak statyczny

Podsumowanie

Znajomość pozycjonowania w CSS umożliwia tworzenie elastycznych i responsywnych układów. Elementy mogą być przesuwane, nakładane lub przyklejane w zależności od celu projektowego.

Checklista