CSS pozicioniranje : CSS Positioning

Ova svojstva se ne nasljeđuju od elemenata roditelja ili predaka.

Položaj : Position

Svojstvo position koristimo kada smo želimo promijeniti zadani položaj trenutnog elementa.

Obrazac je:

position: vrijednost;

Moguće vrijednosti su:

  • static
  • relative
  • absolute
  • fixed

Web dizajn za tebe!


position: static;

Korištenjem vrijednosti svojstva static osigurava se zadani redoslijed pojavljivanja elemenata na web stranici. Nije potrebno dodjeljivati svojstvu position vrijednost static jer se podrazumijeva.


position: relative;

Relativno pozicioniranje mijenja položaj elementa u odnosu na zadani redoslijed pojavljivanja na web stranici. Postavljanjem svojstava left, right, top ili bottom mijenjamo samo položaj trenutnog elementa u odnosu na zadani položaj na kojem se element trebao pojaviti. Neovisno o promjeni položaja trenutnog elementa pozicioniranje slijedećeg elementa ostat će nepromijenjeno u odnosu na zadani položaj.


position: absolute;

Apsolutno pozicioniranje mijenja položaj elementa u odnosu na zadani redoslijed pojavljivanja na web stranici. Element se pojavljuje u odnosu na gornji lijevi (top left) položaj najbližeg roditeljskog elementa. Roditeljski element je najbliži nadređeni element kojem je svojstvo position postavljeno na bilo koju vrijednost osim static. Ako takav element ne postoji tada je element pozicioniran u odnosu na gornji lijevi kut prozora preglednika.


position: fixed;

Fiksno pozicioniranje elementa je isto kao i apsolutno s tom razlikom da je roditeljski element uvijek prozor preglednika. Nema nikakvog utjecaja na njegov položaj u prozoru ako je neki od nadređenih elemenata već pozicioniran.

Element koji je pozicioniran fiksno ne će se pomicati kada pomičemo sadržaj prozor.

Primjer fiksnog pozicioniranja elementa:

position: fixed;
top: 10px;
right: 10px;