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