Pozicioniranje je lahko statično, relativno, absolutno, fiksno ali podedovano. Omogoča nam, da s pomočjo CSSja enostavno določimo pozicije gradnikom spletne strani.
Pri uporabi značke “position” moramo uporabiti tri osnovne atribute:
- Določitev “situacije” – static, relative, absolute, fixed in inherit.
- Določitev koordinat – določitev X in Y koordinate.
- Po želji lahko določimo tudi atribut z-index – z-index nam določi nivo objekta.
Opis situacij:
- Static – to je pred nastavljena vrednost za vse elemente. Vrednost je vedno enaka – static. Static pomeni, da se bo element prikazal normalno, kot bi se brez te značke. Uporabljamo ga v primerih, ko želimo elementu vsiliti static pozicijo.
- Relative – atribut se nanaša na sam element. Če dodelimo elementu atribut relative in ne dodamo nobenega drugega atributa o poziciji – top, right, bottom ali right. Se bo element obnašal, kot static. Če pa elementu dodelimo odmik, npr. 20px levo, se bo element premaknil za 20px v levo od pozicije, kjer bi drugače bil.
- Absolute – pozicioniranje s pomočjo atributa absolute nam omogoča pozicioniranje elementa, kjer koli. Uporabimo lahko top, right, bottom ali left pozicioniranje. Če element nima “starša” (npr.: div objekt v div objektu, kjer ima notranji atribut absolute), se pozicioniranje nanaša na samo pozicijo elementa, drugače pa na pozicijo “starša”.
- Fixed – fiksno pozicioniranje glede na predogled vidnega pola brskalnika. Objekti z elementi fixed se ne premikajo in so “zabetonirani” na dano pozicijo.
- Inherit – povzame nastavitve svojega “starša”.
Z-index določi pozicijo v kupu objektov. Osnovna vrednost je 0, višje ko gre številka višje je postavljen objekt. Z-index si lahko predstavljamo tudi, kot “layerje” v Photoshopu. S pomočjo z-index-a tako dosežemo prekrivanje posameznih objektov.
Več informacij: http://www.w3schools.com/Css/css_positioning.asp
Ziga
Naletel na zanimive primere uporabe značke “position” http://www.barelyfitz.com/screencast/html-training/css/positioning/.