Tato vlastnost určuje jakým způsobem bude vypočítávána pozice prvku na stránce. Ve výchozím stavu je tato vlastnost nastavena na hodnotu static. Tedy, že je daný prvek zobrazován běžně v pořadí, které odpovídá “flow” (tok) dokumentu.
position: static | absolute | relative | fixed | sticky
V případě ostatního nastavení se přesná pozice nastavuje pomocí souřadnic, určenými vlastnostmi top a left (nebo right a bottom).
Tato hodnot je nastavena defaultně. Elementy se vykreslují v pořadí odpovídající HTML kódu.
https://codepen.io/ViktorVrablik/pen/NWoOBxz
V případ tohoto typu můžeme element “posunout” od standardní pozice. Ostatní prvky se řadí stejně jako by prvek byl na původní pozici. Pořadí v jakém se budou vykreslovat prvky je možné měnit pomocí vlastnosti “z-index”
https://codepen.io/ViktorVrablik/pen/RwveBgL
Pokud použijeme hodnotu absolute, “vyjmeme” prvek z běžného toku dokumentu a určíme mu novou pozici na stránce. Pozice se určuje pomocí vlastností top a left (nebo bottom a right). Kde tyto vlastnosti určují vzdálenost od počátečního bodu “rodiče”, který je vždy vlevo nahoře. Ostatní elementy se budou vykreslovat, jako by tam vyjmutý element nebyl.
https://codepen.io/ViktorVrablik/pen/oNmaPXE
position: fixed se chová podobně jako jako position: absolute, s tím rozdílem, že element si drží svou pozici v rámci okna.
https://codepen.io/ViktorVrablik/pen/gOqBdrq
Position sticky se chová jako kombinace relative a fixed. Pokud není rodičovský prvek viditelný chová se jako relative, v momentu kdy rodičovský prvek není v okně, chová se jako fixed.
https://codepen.io/ViktorVrablik/pen/mdvzGWa