Existuje 5 druhou velkostí atribúty position: static, relative, fixed, absolute a sticky. Až potom sa nastavuje, kde bude týmto spôsobom umiestnený element.
Static je základná pozícia, ktorú majú elmenty automaticky nastavenú (teda ju nemusíme nastavovať každému elementu). Skoro všetky veci, ktoré vidíte na stránkach majú statickú pozíciu.
position: static;
Relatívna pozícia hovorí, že element bude niekoľko (px, em, ...) vzdialený od svojej pôvodnej pozície. To ako vzdialený a do akej strany sa nastavuje pomocou atribútov right, left, top, bottom. Ked nejakému elementu nastavíte relatívnu pozíciu, tak následne musíte deklarovať, koľko doprava alebo doľava, hore alebo dole má byť od pôvodnej pozície. Takýmto spôsobom môžu dané elementy "vytŕčať" z obrazovky.
position: relative;
top: 20px;
left: -50px;
Keď chceme aby sa daný element nachádzal stále na našej obrazovke, tak použijeme vlastnosť (asi ste si všimli vlastnosť position: fixed; už pri otvorení stránky):
position: fixed;
top: 0;
left: 0;
Absolútna pozícia hovorí, že element bude niekoľko (px, em, ...) vzdialený od okraja element.
position: absolute;
top: 0;
left: 0;
Velkosť atribútu position sticky má podobnú funkciu ako fixed, s tým rozdielom, že ak sa pôvodná elementu obrázku nachádza na aktuálnej stránke (alebo ak ste sa k pôvodnej pozície daného elementu dopracovali scrollovaním) tak bude jeho pozícia zase sticky, ale ak zase odscrollujete preč tak zostane na vašej obrazovke.
position: sticky;
top: 0;
left: 0;