Svojstvo position koristimo kada želimo promijeniti zadani položaj trenutnog elementa. Moguće vrijednosti su: static, relative, absolute ili fixed.
CDN pohrana slika i videa.
Pretvorba formata slika: webp...
Vrhunsko AI povećanje slika!
25Gb podataka.
Zašto ne sada?
Ova svojstva se ne nasljeđuju od elemenata roditelja ili predaka.
Svojstvo position koristimo kada želimo promijeniti zadani položaj trenutnog elementa.
Obrazac je:
position: vrijednost;Moguće vrijednosti su:
static
relative
absolute
fixed
position: static;Dodjeljivanjem vrijednosti static osigurava se zadani redoslijed pojavljivanja elemenata na web stranici. Html elementu nije potrebno dodijeliti vrijednost static jer je to zadana vrijednost.
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 položaj trenutnog elementa u odnosu na zadani položaj na kojem se element trebao pojaviti.
Neovisno o promjeni položaja trenutnog elementa, položaj slijedećeg elementa ostaje nepromijenjen.
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) kut roditeljskog elementa.
Roditeljski element je prvi 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 (html elementa <body>).
position: fixed;Fiksno pozicioniranje elementa je isto kao i apsolutno. Jedina razlika je to da je roditeljski element uvijek prozora preglednika (html elementa <body>).
Kada je neki od nadređenih elemenata već pozicioniran, to ne će utjecati na njegov položaj u prozoru web preglednika.
Element koji je pozicioniran fiksno se ne pomiče s pomicanjem sadržaja prozora.
Primjer fiksnog pozicioniranja elementa:
position: fixed;
top: 10px;
right: 10px;