Pozicování

Credit for Geronimo Morisot Morla

Vlastnost `position`

Říkáme jak má být prvek na stránce umístěný

Position: `static`

Mají implicitně všechny prvky
Prvek se zobrazí tam, kde na něj vyjde řada

Position: `relative`

Prvek posunu relativně vůči jeho výchozí pozici, zabírá své původní místo
Vlastnosti top, left, right, bottom určují posun vůči výchozí pozici
Vybírám si hranu, v jejímž směru posouvám
Záporná hodnota posouvá v opačném směru

Position: `absolute`

Prvek zcela vyjme z toku dokumentu a lze jej libovolně umístit
Pozicuje se vzhledem ke svému nejbližšímu rodiči který nemá position: static
Pokud takový rodič neexistuje, pozicuje se vůči stránce

Vzájemné překrývání prvků

Standardní pořadí, jak jsou v dokumentu
Prvky které nemají position: static jsou ve vrstvě nahoře
Lze řídit přes vlastnost z-index

Position: `fixed`

Zůstává na obrazovce i když posouváme stránkou/scrollujeme
Zabírá použitelný prostor na obrazovce
Pozor na mobily!

Position: `sticky`

Kombinace static a fixed
Prvek se posouvá tak, aby byl vidět uvnitř svého rodiče