Polohovanie elementov na stránke je veľmi dôležitá vlastnosť. Pri polohovaní je dôležité uvedomiť si možnosti ktoré nám “2D” priestor internetovej stránky ponúka. Polohu elementov je možné meniť v osi x, smerom vľavo, vpravo, rovnako môžeme meniť polohu v smere osi y v smere hore a dole. Polohovanie do strán je možné upravovať pomocou príkazov: top, right, bottom, left.

Čo je ale potrebné uvedomiť si je schopnosť prekrytia elementov na stránke a tvorba takzvaných vrstiev, čo v úvodzovkách nazvaný priestor “2D” mení na priestor trojdimenzionálny “3D”, čiže elementy sa môžu pohybovať aj v smere “von z monitora” a “dovnútra monitora”, dopredu a dozadu. Túto schopnosť si môžete veľmi efektne prezrieť v prieskumníka Mozzily Firefox (pravé tlačidlo myši / preskúmať element / 3D zobrazenie).

. Dôležité je tiež uvedomiť si, že vzťažný bod na ku ktorému sa celý proces polohovania vzťahuje je ľavý horný roh polohovaného elementu (nami polohovaný div tag, alebo obrázok a pod.) V základe sú všetky elementy definované ako statické “static” toto polohovanie nie je možné ovplyniť príkazmi left, top a pod. Samotný druh polohovania upravujeme príkazom position: <spôsob>, tento príkaz definuje akým spôsobom spôsobom je vypočítavaný kotviaci bod, voči ktorému je počítaná poloha vzťažného bodu elementu a zapína schopnosť zmeny tohto bodu pomocou príkazov top, right, bottom, left.

Kaskádové štýly nám ponúkajú niekoľko spôsobov akými je možné meniť polohu jednotlivých elementov, jedným z nich je relatívne polohovanie.  Tento spôsob polohovania je potrebné špecifikovať pomocou CSS. Relatívne polohovanie definujeme pomocou príkazu

position: relative;

Pri tomto spôsobe polohovania  je poloha elementu vypočítavaná automaticky prehliadačom, pričom závisí od usporiadania elementov pred a za takto polohovaným prvkom. Tento spôsob naberá vlastnosti, že priestor vyhradený pre element ostáva nezmenený. To znamená že element je umiestnený na vypočítanom mieste a príkazmi top, right, bottom, left iba mením polohu ľavého horného rohu elementu vzhľadom na vypočítaná miesto. Element sa z hľadiska osi z premiestni nad susedné elementy a obsah tohto elementu prekrýva obsah okolitých elementov. Pre lepšie porozumenie spôsobu relatívneho polohovania jednoznačne odporúčam zhliadnutie videonávodu v hornej časti článku. V návode je tento spôsob polohovania vysvetlený na jednoduchom príklade s postupom a vysvetlením pre úplných začiatočníkov.

Komentáre

Povedzte nám čo si myslíte.

Pridaj komentár

Vyplňte formulár a odošlite