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
Naletel na zanimive primere uporabe značke “position” http://www.barelyfitz.com/screencast/html-training/css/positioning/.