Pozicioniranje elementov s CSS

position

Z oblikovno lastnostjo position določimo način postavitve elementa. Pozicioniranje je lahko statično, relativno, absolutno, fiksno ali podedovano. Omogoča nam, da s pomočjo CSS enostavno določimo pozicije gradnikom spletne strani.

Vrednost	Pomen
`static`	običajna postavitev
`relative`	relativno glede na običajno postavitev
`absolute`	relativno glede na bločni element, v katerem je vsebovan
`fixed`	relativno glede na okno brskalnika
`inherit`	vrednost podeduje od nadrejenega elementa

V vseh primerih (razen pri statični postavitvi) z lastnostmi left, right, top in bottom določimo, za koliko naj bo kateri rob elementa odmaknjen od roba drugega elementa. Po želji lahko določimo tudi atribut z-index, ki določi nivo objekta.

static

To je pred nastavljena vrednost za vse elemente. Static pomeni, da se bo element prikazal normalno, kot bi se brez te oznake. Uporabljamo ga v primerih, ko želimo elementu vsiliti static pozicijo.

.static {
   position: static;
}

static je privzeta vrednost. Element z lastnostjo position: static; nima določenih nobenih lastnosti pozicioniranja.

</div>

relative

Atribut relative 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.

.relative1 {
   position: relative;
}
.relative2 {
   position: relative;
   top: -20px;
   left: 20px;
   background-color: #F5F5F5;
   width: 350px;
}

Element z lastnostjoposition: relative, ki mu ne priredimo nobenih dodatnih lastnosti, je postavljen enako, kot element z lastnostjoposition: static.

</div>

Z določitvijo lastnosti top, right, bottom, left element, ki ima prirejeno lastnostposition: relative, postavimo iz svoje običajne pozicije.

</div>

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

.relative {
   position: relative;
   width: 400px;
   height: 280px;
}
.absolute {
   position: absolute;
   top: 120px;
   right: 0;
   background-color: #F5F5F5;
   width: 250px;
   height: 150px;
}

Ta element ima lastnost position: relative. Če bi imel ta elemnt lastnost position: static, bi bil drugi odstavek div pozicioniran absolutno na elementbody.

</div>

Ta element je pozicioniran absolutno - position: absolute, hkrati pa je pozicioniran relativno na "starša".

</div>

fixed

Fiksno pozicioniranje glede na predogled vidnega polja brskalnika. Objekti z elementi fixed se ne premikajo in so pritrjeni na dano pozicijo.

.fixed {
   position: fixed;
   bottom: 0;
   right: 0;
   width: 200px;
   background-color: #F5F5F5;
}

Ta element ima lastnost pozicioniranja position: fixed; zato se ne prmika z ostalo vsebino.

</div>

left

Z oblikovno lastnostjo left določimo vodoravni odmik levega roba elementa. Odmik merimo relativno glede na levi rob elementa, določenega z vrednostjo lastnosti position.

Vrednost	Pomen
`auto`	samodejna nastavitev odmika, privzeta vrednost
`dolžina`	položaj levega roba v mm, cm, in, pt, pc, em, ex, px (negativne vrednosti so dovoljene)
`%`	položaj levega roba v % (negativne vrednosti so dovoljene)
`initial`	ta vrednost naj bo privzeta
`inherit`	vrednost podeduje od nadrejenega elementa

right

Z oblikovno lastnostjo right določimo vodoravni odmik desnega roba elementa. Odmik merimo relativno glede na desni rob elementa, določenega z vrednostjo lastnosti position.

Vrednost	Pomen
`auto`	samodejna nastavitev odmika, privzeta vrednost
`dolžina`	položaj desnega roba v mm, cm, in, pt, pc, em, ex, px (negativne vrednosti so dovoljene)
`%`	položaj desnega roba v % (negativne vrednosti so dovoljene)
`initial`	ta vrednost naj bo privzeta
`inherit`	vrednost podeduje od nadrejenega elementa

top

Z oblikovno lastnostjo top določimo navpični odmik zgornjega roba elementa. Odmik merimo relativno glede na zgornji rob elementa, določenega z vrednostjo lastnosti position.

Vrednost	Pomen
`auto`	samodejna nastavitev odmika, privzeta vrednost
`dolžina`	položaj zgornjega roba v mm, cm, in, pt, pc, em, ex, px (negativne vrednosti so dovoljene)
`%`	položaj desnega roba v % (negativne vrednosti so dovoljene)
`initial`	ta vrednost naj bo privzeta
`inherit`	vrednost podeduje od nadrejenega elementa

bottom

Z oblikovno lastnostjo bottom določimo navpični odmik spodnjega roba elementa. Odmik merimo relativno glede na spodnji rob elementa, določenega z vrednostjo lastnosti position.

Vrednost	Pomen
`auto`	samodejna nastavitev odmika, privzeta vrednost
`dolžina`	položaj zgornjega roba v mm, cm, in, pt, pc, em, ex, px (negativne vrednosti so dovoljene)
`%`	položaj desnega roba v % (negativne vrednosti so dovoljene)
`initial`	ta vrednost naj bo privzeta
`inherit`	vrednost podeduje od nadrejenega elementa

z-index

S to lastnostjo določimo nivo, na katerem bo narisan element. Brskalnik vse elemente, ki so vsebovani v istem bločnem elementu, riše po nivojih od najnižjega proti najvišjemu. Tako lahko določimo, kateri element bo na površju, ko pride do prekrivanja. Osnovna vrednost je 0, višje ko gre številka višje je postavljen objekt. Do prekrivanja elementov lahko pride, kadar imamo relativno, absolutno ali fiksno postavljene elemente.

Vrednost	Pomen
`auto`	element je na istem nivoju, kot bločni element, v katerem je vsebovan
`celo število`	številka nivoja elementa
`inherit`	vrednost podeduje od nadrejenega elementa

Če za nivo elementa določimo celo število, se za v njem vsebovane elemente vzpostavi lokalni sistem nivojev, v katerem je ta element na nivoju 0.

.relative {
   position: relative;
   width: 450px;
   height: 280px;
}
.absolute1 {
   position: absolute;
   top: 120px;
   right: 0;
   background-color: #F5F5F5;
   width: 280px;
   height: 100px;
   z-index: 2;
}
.absolute2 {
   position: absolute;
   top: 140px;
   left: 10px;
   background-color: orangered;
   width: 260px;
   height: 120px;
   z-index: 1;
}

Ta element ima lastnost position: relative.

</div>

Ta element je pozicioniran absolutno - position: absolute. Nivo elementa je postavljen na z-index: 2.

</div>

Ta element je pozicioniran absolutno - position: absolute. Nivo elementa je postavljen na z-index: 1.

</div>

Nazaj

Naprej