Nastavenie pozície objektov a vrstvy
Ak nie je zadané inak, je stránka vykresľovaná prehliadačom v tom poradí a s takými parametrami, ako je napísaná. Záleží aj or typu prehliadača ako bude potom vyzerať. Takého jednoduché stránky sa pri zmene veľkosto okna automaticky preusporiada. Ak ale chceme, aby sa stránky správala inak, musíme použiť pozicionovanie.
Vrstvy - kontajnery
Ak chceme využiť silu pozicionovania, používajme vrstvy / kontajnery. Vrstva sa vytvorí na mieste štýlov (hlavička alebo samostatný súbor css) pomocou znaku # a jej mena, za ktorým udáme polohu, poradie, obtekanie a iní vlastnsti vrstvy. Pr:
#meno1 {position: fixed; left: 0px; top: 0px; background: #ccc; width=100%; border: 1px red; padding-left: 20px; z-index: 2;}
toto je vrstva s menom meno1 s vlastnosťami ako poloha, pozadie, šírka, okraj, obtekanie zľava a poradie dôležitosti vrstvy. Potom v tele vrstvu použijeme pomocou
<div id="meno1"> ..... </div>
Môžu byť samostatné = za sebou plynúce, ako stránka, ale aj jeden v druhom. To bude vyzerať takto - v hlavičke:
#vrstva1 { ........ }
#vrstva2 { ........ }
A potom na stránke v tele
<div id="vrstva1"><div id="vrstva2"> ..... </div> </div>
Druhy pozícií
1. Absolútne
position: absolute umiestni vrstvu do presne určených súradníc zľava a zhora a nadradí ju nad normálny beh stránky. Umiestňuje voči nadradenému elementu (väčšinou html = okraj stránky), ale ak sú vnorené, tak potom poloha vnútorného voči vonkajšiemu.
2. Relatívne
position: relative umiestni vrtvu do normálneho poradia stránky s tým, že vzdialenosti sú v pixeloch voči predchádzajúcemu elementu (nadpis, odstavec, obrázok atd).
3. Pevné
position: fixed je vlastno absolútne, ale vždy voči oknu prehliadača!!! Čiže ak máme takúto pevnú vrstvu na stránke a stránku posúvame v zmenšenom okne prehliadača, táto vrstva ostáva VŽDY na tom istom mieste!!!
Obtekanie
Udáva, ako je element (čiže aj obrázok) alebo vrstva obtekaná ostatnými - textom, inými vrstvami atd.
Zadáva sa pomocou float a padding:
float: right umiestni element napravo
padding-right: 20px zabezpečí, že 20 pixelov zľava nebude okolo vrstvy nič
padding-top: 15px zabezpečí, že 15 pixelov zdola nebude okolo vrstvy nič
Ak chceme obtekanie zrušiť, použijeme clear: a smer
clear: left
clear: right
clear: both
Poradie vrstiev
Ak umiestnime viac vrstiev na seba, o ich poradí rozhoduje z-index. Čím vyššie číslo, tým je vrstva viac navrchu.
z-index: 3