| 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 | |