Existuje 5 druhov atribútov pre position: static, relative, fixed, absolute a sticky. K použitému atribútu sa potom nastavujú potrebné vzdialenosti.
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;
Relative pozícia hovorí, že element bude niekoľko (px, em, ...) vzdialený
od svojej pôvodnej pozície. Koľko a do akej strany bude vzdialený 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;
Fixed použijeme, ak chceme aby sa daný element nachádzal stále na našej obrazovke.
position: fixed;
top: 0;
left: 0;
Absolute pozícia hovorí, že element bude niekoľko (px, em, ...) vzdialený od okraja obrazovky.
position: absolute;
top: 0;
left: 0;
Sticky - velkosť atribútu 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;
Budeme sa v príkladoch venovať dvom pozíciám, ktoré jednoducho a jasne určujú pozíciu objektu na obrazovke. Absolútna a relatívna. Absolútna pozícia umiestni objekt na do stránku na určené súradnice, bez ohľadu na text okolo neho. Relatívna pozícia určuje, o koľko a má objekt posunúť oproti svojej aktuálnej pozícii.
Pozrite sa na text vpravo hore - Absolútna poloha textu - prvá, pomocou vlastnosti abs1
v style.css som ho umiestnil 130px od hora a 300px od pravého okraja obrazovky. Ak je použitý atribút absolute, text je
vyňatý z obsahu a umiestnený podľa súradníc. V html súbore je napísaný v tomto riadku, ale zobrazí sa na inom mieste.
Absolútna poloha textu - prvá
Druhý text - Text poloha 0,0 som vlastnosťou abs2 umiestnil úplne do ľavého horného rohu.
Text poloha 0,0.
Pri relatívnom pozicovaní nebude text vyňatý z riadku, dôjde len k jeho posunutiu podľa aktuálneho nastavenia. Chcel by som slovo relatívne posunuť nahor. Napíšem vetu a slovo relativne posuniem vľavo left: 50 a nahor top:-35 (áno, ak chcem posúvať nahor, treba dať znamienko mínus)
Kombinácia absolútneho a relatívneho adresovania je čiastočne možná použitím volania v úvodzovkách class="abs1 relat1", abs. relatívne pridaný text si pamätá absolútne nastavenú výšku, relatívnym atribútom som text umiestnil v riadku, primárne má absolútne adresovanie a teda je z textu vyňatý. abs. relativne pridaný
Ak naozaj máte odzálohovaný style.css. skúste v ňom postupne meniť súradnice pre abs1, abs2, relat, relat1. Určite to ale robte vždy po jednom, aby ste mohli každú zmenu zaregistrovať.
Ak by ste potrebovali dostať na podklad textu nejakú farbu, je možné použiť takéto plávajúce relatívne nastavenie.