Pozicování: absolutní, relativní, sticky, fixed, obtékání textem, stacking context (z-index)

Formát: 30 min praktická úloha, 15 min obhajoba + teorie. Teorie pokrývá všech 5 hodnot position, float pro obtékání, z-index a stacking context, plus kompletní řešení úlohy.

Část 1: Teorie

Co znamená "pozicování"

V CSS existuje několik způsobů, jak určit, kde se prvek na stránce zobrazí. Hlavní mechanismy:

1. Normální tok dokumentu (default): prvky jdou jeden za druhým
2. Flexbox: 1D layout v řádku nebo sloupci (otázka 3)
3. CSS Grid: 2D layout (otázka 4)
4. Pozicování přes position: vyjmutí z toku, ruční umístění
5. Float: prvek se "vyplaví" doleva nebo doprava, text ho obtéká

Tahle otázka je o posledních dvou.

position: 5 hodnot

.element {
    position: static;      /* default, normální tok */
    position: relative;    /* posun od původní pozice */
    position: absolute;    /* vyjmutí z toku, podle pozicovacího rodiče */
    position: fixed;       /* podle viewportu */
    position: sticky;      /* hybrid: tok + sticky efekt */
}

position: static (default)

Default chování. Prvek je v normálním toku, vlastnosti top/right/bottom/left/z-index ho neovlivní.

.element {
    position: static;     /* explicitní zápis, většinou ho nepíšeš */
}

Static má své místo: vrátit prvek do normálního toku po nějakém media query přepise.

position: relative