Načrtovanje in razvoj spletnih aplikacij
Nazaj
Naprej

Pozicioniranje elementov s CSS

Pri postavitvi elementov na strani ima pomembno vlogo lastnost position. Z njo določimo, ali element ostane v običajnem toku dokumenta ali pa ga postavimo glede na svoj običajni položaj, glede na prednika ali glede na vidno polje brskalnika.


Pomni: Lastnosti left, right, top in bottom vplivajo samo na pozicionirane elemente. Pri vrednosti position: static nimajo učinka.

Sodobni CSS pozna tudi logične lastnosti za pozicioniranje, na primer inset-inline-start, inset-inline-end, inset-block-start in inset-block-end. Za osnovno razumevanje pozicioniranja pa so najpomembnejše fizične lastnosti left, right, top in bottom.

Osnovna pravila

  • Privzeta vrednost lastnosti position je static.
  • Pri vrednosti relative element ostane v običajnem toku dokumenta, vendar ga lahko premaknemo glede na njegovo prvotno mesto.
  • Pri vrednostih absolute in fixed je element odstranjen iz običajnega toka dokumenta.
  • Pri vrednosti sticky se element najprej obnaša kot običajen element, nato pa se ob drsenju prilepi.
  • Lastnost z-index določa, kateri element je pri prekrivanju narisan nad drugim.

Pozor: Pri absolutnem pozicioniranju element ne rezervira prostora v postavitvi. Zato lahko prekriva druge elemente ali povzroči manj pregledno postavitev, če ga uporabimo nepremišljeno.

Lastnost position

Z lastnostjo position določimo način pozicioniranja elementa. Element je lahko postavljen statično, relativno, absolutno, fiksno ali lepljivo.

Vrednost Pomen
static običajna postavitev v toku dokumenta; lastnosti top, right, bottom, left in z-index nimajo učinka
relative element ostane v običajnem toku dokumenta, nato pa se odmakne glede na svoj običajni položaj
absolute element je odstranjen iz običajnega toka dokumenta in se postavi glede na najbližjega pozicioniranega prednika
fixed element je odstranjen iz običajnega toka dokumenta in se postavi glede na vidno polje brskalnika
sticky element se najprej obnaša kot navaden element, nato pa se ob drsenju prilepi glede na drsno območje
inherit vrednost podeduje od nadrejenega elementa

Pri vrednostih relative, absolute, fixed in sticky lahko z lastnostmi left, right, top in bottom določimo odmik roba elementa od njegovega referenčnega območja. Pri static teh odmikov ne moremo učinkovito uporabiti.

static

static je privzeta vrednost za vse elemente. Element se prikaže v običajnem toku dokumenta, brez posebnega pozicioniranja.

.static {
   position: static;
}
<div class="static">
static je privzeta vrednost. Element nima posebnega pozicioniranja in ostane v običajnem toku dokumenta.
</div>

relative

Element z lastnostjo position: relative ostane v običajnem toku dokumenta. Če mu določimo odmik, se premakne glede na svoj običajni položaj, njegov prvotni prostor pa v postavitvi ostane rezerviran.

.relative1 {
   position: relative;
}
.relative2 {
   position: relative;
   top: -20px;
   left: 20px;
   background-color: #F5F5F5;
   width: 350px;
}
<div class="relative1">
Element z lastnostjo position: relative, ki mu ne določimo odmikov, je prikazan enako kot pri običajni postavitvi.
</div>
<div class="relative2">
Z določitvijo odmikov element z lastnostjo position: relative premaknemo glede na njegovo običajno mesto.
</div>

absolute

Element z lastnostjo position: absolute je odstranjen iz običajnega toka dokumenta in ne rezervira prostora v postavitvi. Postavljen je glede na najbližjega pozicioniranega prednika; če takega prednika ni, se postavi glede na začetni vsebovalni blok.

.relative {
   position: relative;
   width: 400px;
   height: 280px;
}
.absolute {
   position: absolute;
   top: 120px;
   right: 0;
   background-color: #F5F5F5;
   width: 250px;
   height: 150px;
}
<div class="relative">
Ta element ima lastnost position: relative in zato služi kot referenca za absolutno postavljeni notranji element.
</div>
<div class="absolute">
Ta element je absolutno pozicioniran in je postavljen glede na najbližjega pozicioniranega prednika.
</div>

fixed

Element z lastnostjo position: fixed je pritrjen glede na vidno polje brskalnika in se pri običajnem drsenju strani ne premika skupaj z ostalo vsebino.

.fixed {
   position: fixed;
   bottom: 0;
   right: 0;
   width: 200px;
   background-color: #F5F5F5;
}
Primer postavitve za fixed
Element z lastnostjo position: fixed se postavi glede na vidno polje brskalnika. V spodnjem zgledu je postavljen v spodnji desni kot okna brskalnika.
<div class="fixed">
Ta element ima lastnost position: fixed; zato ostane pritrjen spodaj desno tudi med drsenjem.
</div>

Pozor: Fiksno pozicionirani elementi lahko prekrijejo vsebino strani. Zato moramo paziti na njihovo velikost, položaj in uporabnost na manjših zaslonih.

Lepljivo pozicioniranje z sticky

Element z lastnostjo position: sticky se najprej obnaša kot običajen element, nato pa se ob drsenju prilepi, ko doseže določeno mejo, na primer top: 0. Brez take meje se lepljivo obnašanje ne more jasno izraziti.

.sticky-okvir {
  height: 220px;
  overflow: auto;
  border: 2px solid orange;
}

.sticky-naslov {
  position: sticky;
  top: 0;
  background-color: #F5F5F5;
  border: 2px solid gold;
}

To je uporabno pri naslovih razdelkov, menijih ali drugih elementih, za katere želimo, da med drsenjem ostanejo vidni na vrhu območja.

Besedilo na začetku drsnega območja omogoča, da se učinek lepljivega elementa pri drsenju bolje opazi.

Ko se pomikamo navzdol, se naslov z lastnostjo position: sticky prilepi na zgornji rob območja.

<div class="sticky-naslov">
Ta element ima lastnost position: sticky in vrednost top: 0, zato se med drsenjem prilepi na vrh območja.
</div>

Sticky element ostane del običajnega toka dokumenta, dokler ne doseže določene meje.

Zato se obnaša drugače kot fixed, ki je vedno vezan na vidno polje brskalnika.

Če meje ne določimo, na primer z top: 0, se lepljivo obnašanje ne izrazi jasno.

V tem primeru drsno območje ustvarja lastnost overflow: auto na nadrejenem elementu.

Dodatno besedilo je namenjeno temu, da lahko primer med drsenjem dejansko preizkusimo.

Lepljivo pozicioniranje je uporabno pri naslovih razdelkov, navigaciji ali drugih elementih, ki morajo ostati vidni med branjem daljše vsebine.

Ko se pomika vsebina, naslov ostane pripet na zgornji rob tega okvirja, dokler se ne konča njegovo območje.

Lastnosti left, right, top in bottom

left

Z lastnostjo left določimo vodoravni odmik levega roba pozicioniranega elementa. Pri vrednosti relative pomeni premik glede na običajni položaj, pri absolute in fixed pa položaj glede na referenčno območje.

Vrednost Pomen
auto samodejna nastavitev odmika, privzeta vrednost
dolžina položaj levega roba, na primer v px, em ali rem; negativne vrednosti so dovoljene
% položaj levega roba v odstotkih; negativne vrednosti so dovoljene
initial ta vrednost naj bo privzeta
inherit vrednost podeduje od nadrejenega elementa

right

Z lastnostjo right določimo vodoravni odmik desnega roba pozicioniranega elementa.

Vrednost Pomen
auto samodejna nastavitev odmika, privzeta vrednost
dolžina položaj desnega roba, na primer v px, em ali rem; negativne vrednosti so dovoljene
% položaj desnega roba v odstotkih; negativne vrednosti so dovoljene
initial ta vrednost naj bo privzeta
inherit vrednost podeduje od nadrejenega elementa

top

Z lastnostjo top določimo navpični odmik zgornjega roba pozicioniranega elementa. Pri lepljivem pozicioniranju se pogosto uporablja prav top: 0.

Vrednost Pomen
auto samodejna nastavitev odmika, privzeta vrednost
dolžina položaj zgornjega roba, na primer v px, em ali rem; negativne vrednosti so dovoljene
% položaj zgornjega roba v odstotkih; negativne vrednosti so dovoljene
initial ta vrednost naj bo privzeta
inherit vrednost podeduje od nadrejenega elementa

bottom

Z lastnostjo bottom določimo navpični odmik spodnjega roba pozicioniranega elementa. Uporabljamo jo podobno kot top, le da se odmik meri od spodnjega roba referenčnega območja.

Vrednost Pomen
auto samodejna nastavitev odmika, privzeta vrednost
dolžina položaj spodnjega roba, na primer v px, em ali rem; negativne vrednosti so dovoljene
% položaj spodnjega roba v odstotkih; negativne vrednosti so dovoljene
initial ta vrednost naj bo privzeta
inherit vrednost podeduje od nadrejenega elementa

Lastnost z-index

Lastnost z-index določa vrstni red prekrivanja elementov po navidezni osi z. Višja vrednost pomeni, da bo element narisan nad elementom z nižjo vrednostjo. Lastnost velja za pozicionirane elemente ter tudi za elemente v postavitvah flex in grid.

Vrednost Pomen
auto element je na privzetem nivoju znotraj svojega konteksta nalaganja
celo število številka nivoja elementa; dovoljene so tudi negativne vrednosti
inherit vrednost podeduje od nadrejenega elementa

Pozor: Lastnost z-index ni vedno globalna po celotni strani. Elementi se lahko razvrščajo znotraj svojega konteksta nalaganja, zato višja številka na enem mestu še ne pomeni nujno, da bo element nad vsemi drugimi elementi v dokumentu.

.relative {
   position: relative;
   width: 450px;
   height: 280px;
}
.absolute1 {
   position: absolute;
   top: 80px;
   right: 0;
   background-color: #F5F5F5;
   width: 280px;
   height: 100px;
   z-index: 2;
}
.absolute2 {
   position: absolute;
   top: 140px;
   left: 10px;
   background-color: #FCD2BD;
   width: 260px;
   height: 120px;
   z-index: 1;
}
<div class="relative">
Ta element ima lastnost position: relative.
</div>
<div class="absolute1">
Ta element ima lastnost z-index: 2 in je zato nad spodnjim elementom.
</div>
<div class="absolute2">
Ta element ima lastnost z-index: 1.
</div>

Priporočila

  • Za manjše premike elementa glede na njegovo običajno mesto uporabi position: relative.
  • Za natančno postavitev elementa znotraj drugega elementa pogosto uporabi kombinacijo position: relative na predniku in position: absolute na potomcu.
  • Fiksno pozicioniranje uporabljaj zmerno, ker lahko prekrije pomembno vsebino.
  • Pri lepljivem pozicioniranju vedno jasno določi prag, na primer top: 0.
  • Pri prekrivanju elementov preveri tudi kontekst nalaganja, ne samo vrednosti z-index.

Pogoste napake

  • Uporaba lastnosti left, right, top ali bottom pri elementu z vrednostjo position: static.
  • Pri absolutnem pozicioniranju ni določen ustrezen pozicionirani prednik.
  • Pri vrednosti sticky ni določena meja lepljenja.
  • Prepričanje, da vedno zmaga element z najvišjo vrednostjo z-index, ne glede na kontekst nalaganja.
Nazaj
Naprej