Pozicování elementů

Pozicování

Pozicování v CSS slouží k řízení toho, kde a jak se jednotlivé prvky zobrazují na webové stránce. Umožňuje nám ovlivnit přesné umístění prvků, jejich chování vůči ostatnímu obsahu a chování při interakci uživatele, třeba při scrollování.

Primárním účelem pozicování je vytvářet flexibilní a přehledné rozvržení stránky. Díky němu lze například posouvat prvky z jejich výchozí pozice, překrývat je, přichytit k určité části obrazovky nebo zajistit, aby zůstaly viditelné i při pohybu po stránce. Pozicování je tedy klíčové pro tvorbu moderních webových layoutů, navigací, menu, modálních oken nebo třeba plovoucích tlačítek.

Pozici elementu na stránce nastavíme vlastností position, která určuje, jak se bude prvek na stránce umisťovat oproti svému normálnímu umístění (normal flow). Může nabývat několika hodnot:

• static

  Prvek je umístěn podle normálního toku v dokumentu. Výchozí hodnota.

• relative

  Prvek je umístěn podle svého normal flow a následně je posunut vůči sobě. Jeho posun neovlivňuje ostatní prvky na stránce a jeho původní místo zůstává prázdné.

• absolute

  Prvek je vyjmut z normal flow stránky (není pro něj vytvořeno místo) a následně je umístěn relativně vůči prvnímu předkovi s nastavenou vlastností position na fixed, absolute nebo relative, případně vůči oknu prohlížeče.

• fixed

  Prvek je vyjmut z normal flow a není pro něj vytvořeno místo. Následně je umístěn vůči inital bloku, tedy viewportu prohlížeče.

• sticky

  Prvek je umístěn podle normal flow a při posunutí (scrollování) se "přilepí" k zadané pozici.

Pojďme se nyní podívat na konkrétní hodnoty a praktické příklady.

position: relative

Hodnota relative umožňuje posunout prvek vzhledem k jeho původní pozici v normal flow. Prvek zůstává součástí běžného toku stránky, takže ostatní elementy se chovají, jako by se neposunul – jeho původní místo zůstává stále „rezervované“.

K posunutí prvku se používají vlastnosti top, bottom, left a right, které určují posun oproti původní pozici. Zároveň má relative důležitou roli jako referenční bod pro potomky s position: absolute, které se pak pozicují právě vůči tomuto prvku.

Nejčastěji se používá pro jemné doladění pozice (např. posunutí ikon, textu) nebo jako základ pro kombinaci s absolutním pozicováním uvnitř komponent. Krásnou ukázkou může být například vytvoření badge (malé číslo zvýrazňující počet notifikací) u zpráv.

<button class="btn">
  Zprávy
  <span class="badge">3</span>
</button>

/* CSS kód*/
.btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: transparent;
  border: none;
}

.badge {
  position: relative;
  top: -10px;
  left: 5px;
  background: red;
  color: white;
  border-radius: 50%;
  padding: 4px 8px;
  font-size: 12px;
}

position: absolute

Hodnota absolute vyjímá prvek z normal flow a umožňuje jeho přesné umístění pomocí souřadnic. Prvek se pozicuje vůči nejbližšímu rodiči, který má nastavenou position na jinou hodnotu než static (nejčastěji relative). Pokud takový rodič neexistuje, pozicuje se vůči celé stránce (oknu prohlížeče).

K umístění se používají vlastnosti top, right, bottom a left, které určují vzdálenost od okrajů referenčního prvku.

Na rozdíl od relative prvek zcela opouští normal flow, takže ostatní elementy se chovají, jako by na stránce vůbec nebyl — může tedy docházet k překrývání. Nejčastěji se používá pro překrývající prvky jako jsou badge, tooltipy, modální okna, ikony v rozích. Dále také pro přesné umístění prvků v komponentě.

My si ukážeme použití u zavírací ikonky v rohu u notifikace.

<div class="notification">
  <span>Uživatel byl úspěšně přihlášen.</span>
  <button class="close">×</button>
</div>

/* CSS kód*/
.notification {
  position: relative;
  background: #e6ffed;
  padding: 16px 40px 16px 16px;
  border: 1px solid #b7f5c2;
  border-radius: 8px;
  width: 300px;
}

.close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

position: fixed

Hodnota fixed vyjímá prvek z běžného toku stránky (normal flow) a „přilepí“ ho k viewportu, tedy k oknu prohlížeče. To znamená, že prvek zůstává na stejném místě na obrazovce i při scrollování stránky.

K pozicování se používají vlastnosti top, right, bottom a left, které určují přesnou polohu vůči oknu prohlížeče, ne vůči rodičovskému elementu.

Na rozdíl od absolute se fixed neodvíjí od žádného rodiče – vždy se váže k viewportu. Prvek také neovlivňuje ostatní prvky, protože je zcela mimo normal flow.

Nejčastěji se používá pro plovoucí tlačítka, třeba tlačítko pro vyrolování zpět nahoru nebo tlačítko s chatem.

<button class="back-to-top">↑ Nahoru</button>

/* CSS kód*/
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #333;
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
}

position: sticky

Hodnota sticky kombinuje chování relative a fixed. Prvek se nejprve chová jako běžná součást normal flow (jako relative), ale ve chvíli, kdy při scrollování dosáhne definované pozice (např. top: 0), „přilepí se“ a začne se chovat jako fixed.

K určení místa přichycení se používají vlastnosti top, bottom, left a right, které určují, od jaké pozice se má prvek při scrollování „přilepit“ a zůstat na místě.

Sticky funguje vždy v rámci jeho scrollovacího kontejneru (nejbližšího rodiče) – jakmile ho opustí, přestane být přilepený.

Nejčastěji se používá pro prvky, které mají být během scrollování stále částečně viditelné, například navigační lišty, nadpisy sekcí, hlavičky tabulek nebo postranní panely, které se přilepí k okraji obrazovky a zůstávají na místě, dokud jejich kontejner neopustí viditelnou oblast.

<nav class="nav">
  Navigace
</nav>

<div class="content">
  <p>Hodně obsahu...</p>
  <p>Hodně obsahu...</p>
  <p>Hodně obsahu...</p>
  <p>Hodně obsahu...</p>
  <p>Hodně obsahu...</p>
</div>

/* CSS kód*/
.nav {
  position: sticky;
  top: 0;
  background: white;
  padding: 15px;
  border-bottom: 1px solid #ddd;
  font-weight: bold;
}

.content {
  height: 2000px;
}