Mala šola CSS-ja V.: Position

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

  1. Določitev “situacije” – static, relative, absolute, fixed in inherit.
  2. Določitev koordinat – določitev X in Y koordinate.
  3. 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

Komentiraj


*