Download pdf - CSS Pozicioniranje

SADRŽAJ

1. Uvod ................................................................................................................................................ 1

1.1. Normal Flow ............................................................................................................................ 1

1.2. CSS display i visibility svojstvo ................................................................................................. 2

1.3. HTML <div> i <span> element ................................................................................................ 5

1.4. CSS model kutije (box model) .................................................................................................. 5

Visina i širina ....................................................................................................................... 7

Margine i padding ............................................................................................................... 7

Margine ............................................................................................................................... 7

Padding ............................................................................................................................... 7

Ivice ..................................................................................................................................... 7

1.5. Pseudoklase i pseudoelementi ................................................................................................ 8

Overflow svojstvo ............................................................................................................... 8

1.6. Uslovni komentari za IE ........................................................................................................... 9

2. Pozicioniranje HTML elemenata upotrebom CSS-a....................................................................... 10

2.1. Float CSS svojstvo .................................................................................................................. 10

Sintaksa ............................................................................................................................. 10

Osobine plutajudih elemenata .......................................................................................... 11

Float u praksi ..................................................................................................................... 12

Problemi u primjeni float svojstva .................................................................................... 14

2.2. Position CSS svojstvo ............................................................................................................. 17

Position: static ................................................................................................................... 17

Position: relative ............................................................................................................... 18

Position: absolute ............................................................................................................. 19

Position: fixed ................................................................................................................... 20

Web programiranje CSS pozicioniranje

1

1. Uvod

Jezik za obilježavanje CSS znači Cascading Style Sheets. Dijeli se na dvije verzije – 2.1 i 3, a u ovoj

skripti bavimo se isključivo CSS-om 2.1 koji je, uprkos postojanju verzije 3, još uvijek u širokoj

upotrebi, mada polako svoje mjesto ustupa novijoj verziji standarda.

CSS svoj naziv zahvaljuje svojoj osobini određenosti prioriteta u prikazu bududi da CSS-ovi selektori

na raznim razinama i različitim prioritetima mogu oblikovati isto mjesto. CSS je usmjeren za prikaz

(X)HTML-a, ali ne nužno samo njega nego i bilo kojeg drugog jezika za obilježavanje (npr. XML).

Bududi da je preuzima funkciju grafičkog oblikovanja sadržaja, (X)HTML-u ostaje ono za što je

prvobitno i zamišljen – za opis strukture elemenata. Radimo li u striktnom modu HTML-a 4.1 ili

XHTML-a 1.0, njegova je upotreba obavezna.

Odvajanjem sadržaja od izgleda generira se manje koda, a on je bitno pregledniji te ga je lakše

naknadno uređivati.

Svaki se element (X)HTML-a može modificirati CSS-om čime možemo govoriti o univerzalnosti CSS-

ovih selektora (za razliku od HTML-ovih atributa).

Popisi selektora (selectors) je podugačak i on se ne mora učiti napamet, ali se mora znati za što služi i

kako se upotrebljava. U ovim se skriptama oni nede taksonomski nabrajati, nego de se ukazati na

osnovnu sintaksu i mogudnosti, a učenicima se ostavlja da dodatne informacije pronađu na tutorijalu

iz CSS na stranicama W3Schoolsa http://www.w3schools.com/css/. Zbog svoje univerzalnosti

selektori su primjenjivi za brojna mjesta tako da je učenje time jednostavnije – svojstvo padding,

margin, align može imati i odlomak, div, slika, naslov itd.

U ovoj skripti biti de dat kratak opis nekih naprednih CSS selektora i njihovi načini primjene prilikom

izrade web stranica.

1.1. Normal Flow

Prije negoli pređemo u pregled i opisivanje pojedinih CSS selektora bitni za naše izučavanje CSS-a ,

važno je razmotriti ograničenja odnosno osobine prostora u kojem CSS funkcioniše. Osnovna

karakteristika za koju se vežu sve osobine CSS-a zove se normal flow ili normalni tok dokumenta.

Prema CSS 2.1 specifikaciji svaki element unutar CSS posmatra se kao kutija (box) na koji se

primjenjuju različita CSS svojstva.

Ako su elementi kutije, normal flow dokumenta analogan je zakonu gravitacije u stvarnom svijetu.

Normalni tok definiše način na koji redamo kutije elemenata jedan na drugi, jedan ispod ili pored

drugog, u onom redu u kojem se pojavljuju u (X)HTML kôdu. Osnovna pravila koja nam zakon

gravitacije dozvoljava u načinu redanja običnih kutija, važe i u svijetu CSS-a s tom razlikom da nam

CSS nudi načine i mogudnosti da prkosimo zakonu gravitacije ukoliko to želimo.


2

1.2. CSS display i visibility svojstvo

Da bi smo razumjeli kako funkcioniše display/visibility svojstvo pogledajmo osnovnu podjelu HTML

elemenata na dvije skupine:

1. block-level elementi

Počinju i završavaju sa novim redom (line break) u prikazu browsera

<h1>, <p>, <ul>, <table>, <div>

2. inline elementi

prikazuju se jedan za drugim, bez prelaza u novi red

<b>, <td>, <a>, <img>, <span>

Bez obzira na ovu podjelu, mogude je promijeniti inline element u block-level i obrnuto, čime se može

postidi specifičan prikaz stranice a još uvijek biti u okviru web standarda.

Sljededi primjer prikazuje elemente liste kao inline elemente.

Rezultat unutar browsera

Sljededi primjer prikazuje <span> element kao blok element:


3

Rezultat unutar browsera

Display osobina definiše kako i da li se upošte element prikazuje, a visibility osobina definiše da li bi

elemenat trebao biti vidljiv ili ne. Pogledajmo na sljededem primjeru.

Element stranice možemo „sakriti“ tako što postavimo svojstvo display na „none“ ili visibility na

„hidden“. Međutim, postoji razlika u krajnjem prikazu ostalih elemenata stranice.

Visibility:hidden sakriva element, ali predviđeni prostor za taj element u prikazu stranice još uvijek

je zauzet. Element de biti sakriven, ali de još uvijek uticati na izgled stranice.


4

Display:none sakriva element ali ne zauzima prostor unutar stranice. Element de biti sakriven, a

stranica de se prikazati kao da on uopšte i ne postoji.


5

1.3. HTML <div> i <span> element

<div> je block-level element koji se može koristiti kao kontejner za grupisanje drugih HTML

elemenata. Nema posebnog značenja, osim tog da s obzirom da predstavlja block-level element,

browser prikazuje po jedan prazan red prije i poslije elementa.

U kombinaciji sa CSS-om, <div> element se koristi za postavljanje stilova na vedi broj elemenata.

Druga česta upotreba <div> elementa prilikom definisanja izgleda (layouta) stranice. Zamjenjuje

danas prevaziđenu metodu upotrebe <table> elementa za definisanje izgleda stranice.

<span> element predstavlja inline element koji se može koristiti kao kontejner za tekst. Element

nema posebnog značenja, a u kombinaciji sa CSS-om može se upotrijebiti za postavljanje određenih

stilova na dijelove teksta.

Tag Opis

<div> Definiše sekciju u dokumentu (block-level)

<span> Definiše sekciju u dokumentu (inline)

1.4. CSS model kutije (box model)

Vrlo bitna osobina za razumjevanje HTML-a i CSS-a jeste tzv. “Box model“.

“Box model“ definiše svaki element na HTML stranici (block ili inline level) kao pravougaonu „kutiju“,

koja pored visine i širine može (ali i ne mora) uključivati margine (margins), popune (padding) i ivicu

(border).

Da naglasimo još jednom

Vrlo je bitno znati odrediti tačne dimenzije kutije pojedinog elementa kako bi se prilikom njegovog

pozicioniranja znala potrebna veličina prostora u kojem se on mora nalaziti. U suprotnome može dodi

do pomjeranja elemenata koji može imati nepredvidive posljedice na naš dizajn i otežati mogudnosti

pronalaženja greške prilikom njegovog kreiranja.

Dimenzija kutije započinje sa širinom i visinom elementa koja može biti definisana njegovim tipom,

njegovim sadržajem ili vrijednostima CSS svojstava width i height.Visina i širina se zatim sabiraju sa

vrijednostima CSS svojstava padding i border. Na kraju dolazi i margin svojstvo, odnosno njegova

vrijednost koja ne ulazi u ukupnu dimenziju elementa ali definiše box model elementa (njegovu

udaljenost od drugih elemenata stranice).

SVAKI ELEMENT NA HTML STRANICI JE

PRAVOUGAONA KUTIJA


6

Ukoliko blok elementu ne definišemo širinu ili visinu kroz CSS, browseri de inicijalno ova svojstva

postaviti na auto. Prazni elementi (bez ikakvog sadržaja) zahtijevaju širinu i visinu koja nije auto kako

bi se prikazali unutar browsera.

Uzmimo za primjer sljededi CSS kod:

U tom slučaju za prikazani <div> element, box model bi izgledao ovako:

Ukupna veličina prostora koji zauzima element uključujudi i box model elementa, u prikazu browsera

iznosio bi:

Pogledajmo malo bolje sva svojstva koja definišu box model.

Širina = 20px + 1px + 20px + 400px + 20px + 1px + 20px = 482px

Visina = 20px + 1px + 20px + 200px + 20px + 1px + 20px = 282px


7

Visina i širina

Svaki element nasljeđuje osobine visine i širine od elementa u kojem se nalazi (inherit) ili su one

definisane od strane sadržaja koji se u njima nalazi.

Kako inline elementi ne mogu imati fiksnu veličinu, osobine visine i širine mogu se promijeniti samo

na block level elementima.

Margine i padding

Svaki browser primjenjuje određene (defaultne) margine i padding na elemente koje prikazuje kako

bi poboljšao čitljivost i preglednost sadržaja. Podrazumjevane vrijednosti se razlikuju od browsera do

browsera i od elementa do elementa. Iz upravo ovog razloga uobičajena je praksa da se prilikom

izrade dizajna stranice sve podrazumjevane vrijednosti margina i padding-a postave na nulu kako bi

ste imali zajedničku polaznu tačku prilikom njegove izrade i mogli sami definisati željene vrijednosti.

Ovo se najlakše postiže tzv. reset.css ili default.css datotekom u kojoj se postavljaju početne

vrijednosti a koja se učitava prilikom prikaza stranice.

Margine

omoguduju definisanje prostora oko elementa koji se nalazi izvan njegove ivice i u potpunosti je

transparentan (providan). Margine se koriste kako bi se drugi elementi “udaljili“ ili “odvojili“ od

trenutnog za određeni broj piksela.

Padding

svojstvo je slično marginama, ali unutar granica (ivica) elementa. Koristi se da bi se definisao

slobodan prostor unutar elementa, a ne za pozicioniranje kao margine.

Ivice

nalaze se između paddinga i margina i definišu okvir elementa. Svaka ivica mora imati vrijednosti:

širinu, stil i boju.


8

1.5. Pseudoklase i pseudoelementi

Imaju takav naziv jer ne postoje i ne definišu se zasebno ved uz ved neki postojedi selektor uz koji se

veže dvotačkom (:). Na primjer

a:link {color:#FF0000;} /* neposjedeni link */

a:visited {color:#00FF00;} /* posjedeni link */

a:hover {color:#FF00FF;} /* miš preko linka */

a:active {color:#0000FF;} /* selektovan link */

Četiri gore navedene pseudoklase definišu izgled linka u zavisnosti od njegovog stanja. Ovdje je još

bitno navesti da za konkretnu primjenu bitan redoslijed navođenja pseudoklasa koji mora biti

identičan gore navedenom kako bi klase bile primjenjene.

Navedimo još dvije najčešde korištena pseudoelementa

:before – koristi se da bi se ubacio sadržaj prije sadržaja elementa. Slijededi primjer

ubacuje sliku prije svakog <h1> elementa:

:after – koristi se da bi se ubacio sadržaj poslije sadržaja elementa. Slijededi primjer

ubacuje sliku poslije svakog <h1> elementa:

Overflow svojstvo

Odnosi se na ponašanje sadržaja unutar elementa ako je vedi od samog elementa:

visible – inicijalna vrijednost, sadržaj de se prikazati izvan granica elementa

hidden – sadržaj koji ne stane u element nede biti prikazan

scroll – uz donji i desni rub elementa pojavit de se klizne trake (scroll bars) pomodu kojih je

mogude pomicati prikaz sadržaja, ako je prevelik za prikaz u cijelosti

auto – isto kao i scroll, osim što se klizne trake pojavljuju samo ako je sadržaj prevelik za

prikaz u cijelosti.


9

1.6. Uslovni komentari za IE

Microsoft je razvio sintaksu browserskih komentara koji vrijede samo za Internet Explorer, a koji su

nam vrlo korisni. Bududi da su brojne verzije IE-a međusobno različite, imamo potrebu znati koju

verziju korisnik koristi da bismo mu isporučili njemu prilagođen CSS.

Ostali browseri, dakle, ignorirat de ovaj kôd i smatrati ga običnim komentarom. Proširena sintaksa

jest sljededa:

Primjer korištenja u praksi:

Potreba za uslovnim komentarima uslijedila je poslije brojnih problema koji su postojali u definiciji

CSS-a za različite verzije IE (od verzije 5 do 9) kao i uslijed potreba da se ista CSS svojstva prikazuju

različito u različitim verzijama IE-a. Pored uslovnih komentara za ovu namjenu mogu se koristiti i

underscore i star property hack iako je opšta preporuka da se u ovu svrhu koriste uslovni komentari.


10

2. Pozicioniranje HTML elemenata upotrebom CSS-a

Definisanje veličine elementa unutar box modela samo je polovina posla u procesu kreiranja izgleda

stranice. Drugu polovinu predstavlja poznavanje i primjena načina za međusobno pozicioniranje

elemenata unutar stranice (dokumenta).

2.1. Float CSS svojstvo

Prvi način za postizanje željenog layouta (izgleda) stranice jeste pomodu float CSS svojstva. HTML

elementi sa primjenjenim float svojstvom se ponašaju poput slika u tekstualnim dokumentima u

kojima se slika nalazi omotana tekstom (wrapping).

Upotreba float svojstva prilikom dizajna stranice ima sličan efekat na elemente koji se na njoj

prikazuju.

Plutajudi (floated) elementi ostaju u normalnom toku dokumenta (web stranice). Za razliku od njih,

apsolutno pozicionirani elementi su uklonjeni iz toku dokumenta i ponašaju se kao da nisu sastavni

dio sadržaja stranice (ne utiču na njegovu poziciju niti on utiče na njihovu).

Sintaksa

Postoje četiri mogude vrijednosti float svojstva: left, right, none i inherit. Primjer deklaracije unutar

koda na element sa id-om sidebar dat je na slici ispod.


11

Najviše se koriste osobine left i right koje označavaju u koju stranu se postavljaju elementi u odnosu

na normalni tok dokumenta. None (po defaultu) element nede biti plutajudi, a inherit podrazumjeva

da element nasljeđuje float svojstvo od nadređenog (parent) elementa.

Da bi normalno funkcionisao, float svojstvo ne zahtjeva postojanje ili primjenu nekog drugog CSS

svojstva, međutim, da bi se postigla bolja primjena često se kombinuje sa svojstvom width. Naime,

plutajudi element treba imati eksplicitno definisanu širinu kao bi se ponašao na željeni način i kako bi

se izbjegli neželjeni efekti u određenim browserima.

Osobine plutajućih elemenata

1. Lijevo plutajudi elementi de se pomjeriti ulijevo sve dok njegova lijeva margina (ili ivica

ukoliko margina ne postoji) dodirne ili ivicu bloka u kojem se nalazi (parent block) ili ivicu

drugog plutajudeg elementa.

2. Ukoliko veličina plutajudeg elementa prelazi raspoloživi horizontalni prostor, plutajudi

element de se pomjeriti prema dole.

3. Ne pozicionirani, ne plutajudi, block level element ponaša se kao da plutajudi element ne

postoji, jer je plutajudi element izvan normalnog toka drugih blok elemenata.

4. Margine plutajudih elemenata se sabiraju sa marginama susjednih blokova.

5. Korijenski element (<html>) ne može biti plutajudi.

6. Inline element koji je plutajudi je ujedno konvertovan u block-level element.


12

Float u praksi

Jedno od osnovnih upotreba plutajudih elemenata jeste plutanje slike oko teksta. Na primjer,

CSS primjenjen na gornju sliku dat je na sljededoj slici:

Jedino svojstvo potrebno za postizanje željenog efekta je float svojstvo, ostala dva su iz estetskih

razloga. Kao što smo naveli ranije, plutajudi elementi su izvađeni iz normalnog toka u donosu na

druge blok elemente, tako da drugi elementi ostaju u normalnom toku i ponašaju se kao da plutajude

elementi i ne postoje. Pogledajmo sljededi primjer:

U gornjem primjeru, <p> element je block-level element, koji ignoriše plutajudi element, prostirudi se

cjelokupnom dužinom nadređenog elementa umanjen za padding. Svi ne plutajudi, blok elementi se

ponašaju na ovaj način.


13

Tekst unutar paragrafa je inline, tako da se prostire oko plutajudeg elementa. Plutajudem elementu

postavljena je margina da bi se odvojio od paragrafa, kako bi se lakše uočilo da paragraf u potpunosti

ignoriše plutajudi element.

Kako bi ste u određenom dijelu stranice prekinuli sa daljnjim pozicioniranjem plutajudih elemenata

odnosno elemente nastavili postavljati u normalni tok dokumenta koristi se CSS svojstvo clear.

Ovo svojstvo djeluje na element na koji se primjenjuje i vrada ga u normalni tok dokumenta (od te

tačke/elementa pa nadalje).

Svojstvo se samo primjenjuje na elemente koji nisu plutajudi odnosno njegova primjena na plutajude

elemente nede elemente koji se nalaze iza njih vratiti u normalni tok.

I clear svojstvo ima četiri mogude vrijednosti: Both se najviše koristi, uklanja float elemente sa obje

strane elementa na koji se primjenjuje. Left i Right uklanja float elemente samo sa određene strane.

None je default vrijednost, koja u stvari i ne uklanja plutajude elemente.

Primjer clear svojstva sa vrijednošdu right dat je na sljededoj slici:


14

Problemi u primjeni float svojstva

Jedan od najuobičajenih problema u dizajniranju stranica sa float svojstvom svakako je problem

predstavljen na sljededoj slici:

Primjetimo da se donja ivica plutajude slike nalazi izvan granica elementa u kojem se slika nalazi

(element roditelj). Roditelj se nije dovoljno proširio kako bi obuhvatio i plutajudi element. To je

upravo ono što smo ranije i konstatovali: plutajudi element je izvan toka dokumenta u odnosu na

druge blok elemente, tako da se svi ostali blok elementi prikazuju kao da ovaj ne postoji. To nije CSS

greška ved željeni način prikaza. Svi browseri prikazuju ovaj primjer na isti način.

Drugi problem identičan ovome jeste da ukoliko blok element sadrži samo plutajude elemente, on u

prikazu stranice nede imati prikazanu visinu bez obzira na visinu plutajudih elemenata koje sadrži.


15

Na slici gore blok element koji sadrži plutajude elemente (element roditelj) ima postavljenu ivicu crne

boje od 5px kako bi se upošte prikazao unutar browsera.

Za navedni problem(e) postoji nekoliko rješenja čija primjena zavisi od specifičnosti potreba i željenih

osobina.

Najjednostavniji način za rješenje jeste da se i kontejner blok element učini plutajudim.

Sada se kontejner proširio dovoljno da obuhvati sve elemente koji se u njemu nalaze (child elementi).

Ali nažalost ovo rješenje radi samo u ograničenom broju slučajeva, pošto plutajudi roditelj element

može imat neželjene posljedice na izgled stranice.

Drugi način jeste ubacivanje dodatnog <div> elementa na samo dno kontejner elementa sa clear

svojstvom.

Primjer koda za realizaciju navedenog rješenja:

Odgovarajudi CSS koji se primjenjuje na novi element:

Pseudoelement :after dodaje element na ved kreiran HTML stranicu. Primjer CSS-a:


16

CSS klasa „clearfix“ se primjenjuje na bilo koji kontejner element koji sadrži plutajude elemente a ne

proširuje se dovoljno da ih sve obuhvati.

Kao najbolje rješenje problema nametnulo se CSS svojstvo overflow sa vrijednostima hidden ili auto

koje se definiše na kontejner elementu. Jednostavno, lagano i efikasno rješenje koje radi u svim

modernim web browserima.

Nedostatak ove metode (u svim browserima) predstavlja mogudnost da de kontejner element

sadržavati klizne trake (scroll bars) na svojim stranicama (overflow:auto) ili da nede prikazati

cjelokupni sadržaj (overflow:hidden).


17

2.2. Position CSS svojstvo

Pored osobine plutanja (float) kojom možemo postaviti element na željeno mjesto, postoji i druga

metoda pozicioniranja elemenata u layoutu stranice. Riječ je o CSS svojstvu position.

Podrazumjevana (default) vrijednost ovog svojstva je static, koja zadržava element u normalnom

toku dokumenta. Element sa definisanim svojstvom position:relative takođe ne izlazi iz normalnog

toka dokumenta ved se samo pomjera u odnosu na njegovu podrazujmevanu lokaciju za određeni

broj piksela kako je to definisano offset svojstvima top, right, bottom i left. Druge dvije vrijednosti

position svojstva absolute i fixed takođe funkcionišu sa offsetima s tom razlikom da prekidaju

normalni tok dokumenta za element na kojem su primjenjene. Osim toga, ove vrijednosti svoju

poziciju unutar layouta računaju u odnosu na nadređeni element sa svojstvom position:relative ili u

odnosu na root element stranice.

Position: static

Kao što je ranije navedeno elementi sa svojstom position postavljenim na vrijednost static ne izlaze iz

normalnog toka dokumenta i predstavljaju inicijalnu (default) vrijednost ovog svojstva kod svih

elemenata. Najčešde se koristi da se određenom elementu position vrijednost vrati na inicijalnu,

ukoliko je ona bila promjenjena na neku drugu. Uzmimo za primjer tri elementa kojima je

postavljenja vrijednost position:static.

U prvom primjeru vidimo tri elementa koji su poredani jedan ispod drugog kao kula od kocki.


18

Position: relative

Relativno pozicionirani elementi ponašaju se kao statički pozicionirani elementi.

Međutim, za razliku od prethodnog slučaja, ukoliko je na element postavljeno svojstvo

position:relative mogude je dodatnim svojstvima sada preciznije pozicionirati element na samoj

stranici koristedi offset svojstva. Uzmimo na primjer element sa selektorom #box_2:


19

Kao što sa slike vidimo sva tri elementa su poredani jedan ispod drugog međutim, plavi element je

pomjeren 200 piksela ulijevo u odnosu na normalni tok dokumenta ali se još uvijek nalazi u njemu.

Zeleni element se „ponaša“ kao da je plavi na svom početnom mjestu tj. direktno iznad njega. Drugim

riječima, zeleni element je pozicioniran kao da plavi nije izmaknut za određenu offset vrijednost.

Kreiranje koordinatnog sistema za elemente unutar sebe (elemente potomke) predstavlja još jednu

od osobina relativnog pozicioniranja. Koordinatni sistem u ovom slučaju predstavlja polaznu tačku za

offset vrijednosti. Prisjetimo se prethodnog primjera u kojem element sa #box_2 se ne nalazi unutar

drugih elemenata, tako da koordinatni sistem koji element koristi da bi se pozicionirao je dokument u

kojem se nalazi. Ukoliko ubacimo ovaj element unutar #box_1, dobiti demo drugačiji rezultat pošto

de se sada element #box_2 pozicionirati relativno u odnosu na #box_1 . Na primjer, ne mijenjajudi

CSS, izmijenimo HTML tako da se #box_2 nalazi unutar #box_1.

Zbog novog koordinatnog sistema u odnosu na koji se računa offset vrijednost, plavi element se

pozicionira 200 piksela ulijevo u odnosu na crveni.

Position: absolute

Za razliku od vrijednosti static i relative, elementi sa position vrijednošdu absolute su izdvojeni iz

normalnog toka dokumenta. To znači da element možemo postaviti bilo gdje unutar dokumenta a da

nede uticati na druge elemente u normalnom toku, niti de oni uticati na njega. Ali poput relativno

pozicioniranih elemenata, apsolutno pozicionirani elementi kreiraju novi kooordinatni sistem za

elemente koji su unutar njih (child elements).


20

Iz primjera sa slike gore vidimo da je div elementu dodijeljena vrijednost position:relative ali bez

dodatnih vrijednosti offseta tako da se on ponaša kao statički element (position:static) ali služi kao

referentna tačka (koordinatni sistem) za apsolutno pozicioniranje elemenata koji se nalaze unutar

njega. Pa tako, nenumerisana lista apsolutno je pozicionirana 10 piksela ispod i 10 piksela udesno

unutar granica div elementa. Za davanje offset vrijednosti mogude je koristiti i negativne vrijednosti

za pomjeranje u suprotnom smjeru. Na primjer, top: -20px pomjeriti de element za 20 piksela iznad

nadređenog elementa koji je relativno pozicioniran.

Position: fixed

Element sa ovako definisanim svojstvom ima sva svojstva kao i apsolutno pozicionirani element, s

tom razlikom da on ostaje fiksiran u odnosu na prikaz browsera (viewport) za definisanu offset

vrijednost. Ovo znači da element se ne pomjera sa scrollom stranice ved je fiksiran na jednom mjestu

u prikazu browsera.