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.
Web programiranje CSS pozicioniranje
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:
Web programiranje CSS pozicioniranje
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.
Web programiranje CSS pozicioniranje
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.
Web programiranje CSS pozicioniranje
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
Web programiranje CSS pozicioniranje
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
Web programiranje CSS pozicioniranje
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.
Web programiranje CSS pozicioniranje
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.
Web programiranje CSS pozicioniranje
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.
Web programiranje CSS pozicioniranje
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.
Web programiranje CSS pozicioniranje
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.
Web programiranje CSS pozicioniranje
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.
Web programiranje CSS pozicioniranje
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:
Web programiranje CSS pozicioniranje
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.
Web programiranje CSS pozicioniranje
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:
Web programiranje CSS pozicioniranje
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).
Web programiranje CSS pozicioniranje
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.
Web programiranje CSS pozicioniranje
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:
Web programiranje CSS pozicioniranje
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).
Web programiranje CSS pozicioniranje
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.