 | Peatüki sisukord | |
7.2 Positsioneerimine
CSS võimaldab elemente positsioneerida. Algselt paikneb sisu veebilehel sellises järjekorras, nagu HTML-i dokumendis on kirja pandud. Sisuliselt näeb veebileht välja nagu üks suur konteiner, mille sisse on paigutatud palju "kaste". Tihtipeale soovitakse aga neid ümber paigutada ning teistmoodi kuvada. Selleks on CSS parameeter position, mis pakub positsioneerimiseks nelja erinevat varianti:
static- vaikimisi väärtus - elemendid paigutatakse üksteise alla
/*Static kasutamine*/
div.static { position: static; }
relative- võimaldab objekti liigutada tema esialgse asukoha suhtes
/*Relative kasutamine*/
div.relative { position: relative; }
fixed- kindla suuruse ja asukohaga objekt - see objekt määratakse ära veebilehitseja akna suhtes, mitte kasti järgi, mille sees objekt asub; fikseeritud positsiooni puhul ei liigu objekt kaasa lehe kerimisel
/*Fixed kasutamine*/
div.fixed { position: fixed; bottom: 0; width: 200px;}
absolute- ei sõltu teistest elementidest, vaid objekti paiknemisest lehel
/*Absolute kasutamine*/
div.absolute { position: absolute; }
Lisaks kasutatakse asukoha määramise parameetreid top (kui palju liigutatakse objekti tema esialgsest kohast allapoole), bottom (kaugus alt), left (kaugus vasakult) ja right (kaugus paremalt), mis määravad objekti asukoha.
Iseseisev ülesanne:
1. Proovige ise järele, kuidas töötab suhteline positsioneerimine, muutes right, left, top, bottom väärtused.
2. Asendage väärtus relative väärtusega absolute. Kas midagi on muutunud? Mis täpsemalt?
Kasutades z-index parameetrit, on võimalik määrata elementide kuvamise järjekorda nagu
koordinaadid z-teljel. Suurema väärtusega kuvatakse kõige ees. Väärtustena saab kasutada nii positiivseid kui ka negatiivseid täisarve, vaikeväärtuseks on auto, mis sisuliselt on 0. Oluline on meeles pidada, et kui soovitakse järjekorda muuta, peab positsioneerimine olema tehtud absolute, relative või fixed parameetriga. Näiteks kui loome piltide jaoks kujundusklassi nimega "front", asetame pildid teiste objektide suhtes kõrgemale kihile (näites on väärtuseks 10):
img.front {z-index: 10}
| Peatüki sisukord | |