CSS Pozicioniranje

SADRŽAJ 1.

Uvod ................................................................................................................................................ 1 1.1.

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

1.2.

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

1.3.

HTML i 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. 2.

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

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. 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 CSSovih 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.

1

Web programiranje

1.2.

CSS pozicioniranje

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 , , , , 2. inline elementi prikazuju se jedan za drugim, bez prelaza u novi red , , , , 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 element kao blok element:

2

Web programiranje

CSS pozicioniranje

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.

3

Web programiranje

CSS pozicioniranje

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.

4

Web programiranje

1.3.

CSS pozicioniranje

HTML i element

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, element se koristi za postavljanje stilova na vedi broj elemenata. Druga česta upotreba elementa prilikom definisanja izgleda (layouta) stranice. Zamjenjuje danas prevaziđenu metodu upotrebe elementa za definisanje izgleda stranice. 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.

1.4.

Tag

Opis



Definiše sekciju u dokumentu (block-level)



Definiše sekciju u dokumentu (inline)

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 SVAKI ELEMENT NA HTML STRANICI JE PRAVOUGAONA KUTIJA

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).

5

Web programiranje

CSS pozicioniranje

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 element, box model bi izgledao ovako:

Ukupna veličina prostora koji zauzima element uključujudi i box model elementa, u prikazu browsera iznosio bi: Širina = 20px + 1px + 20px + 400px + 20px + 1px + 20px = 482px Visina = 20px + 1px + 20px + 200px + 20px + 1px + 20px = 282px

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

6

Web programiranje

CSS pozicioniranje

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.

7

Web programiranje

1.5.

CSS pozicioniranje

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 elementa:

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

ubacuje sliku poslije svakog 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.

8

Web programiranje

1.6.

CSS pozicioniranje

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.

9

Web programiranje

CSS pozicioniranje

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.

10

Web programiranje

CSS pozicioniranje

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 () ne može biti plutajudi. 6. Inline element koji je plutajudi je ujedno konvertovan u block-level element.

11

Web programiranje

CSS pozicioniranje

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, 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.

12

Web programiranje

CSS pozicioniranje

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:

13

Web programiranje

CSS pozicioniranje

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.

14

Web programiranje

CSS pozicioniranje

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 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:

15

Web programiranje

CSS pozicioniranje

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).

16

Web programiranje

2.2.

CSS pozicioniranje

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.

17

Web programiranje

CSS pozicioniranje

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:

18

Web programiranje

CSS pozicioniranje

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).

19

Web programiranje

CSS pozicioniranje

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.

20