Pozicioniranje elemenata

Pozicioniranje elemenata

Jedna od najbitnijih CSS vrednosti je gotovo bezgranična mogućnost pozicioniranja elemenata unutar web strane, kako apsolutno tako i relativno u odnosu na druge elemente. HTML nije bio predvidjen da se bavi pitanjima pozicioniranja, tj. pravljen je da sadržaj (tekst i slike) u prozoru pretraživača prikazuje po redosledu kojim je HTML kod napisan, tačnije odozgo na dole i u tom redosledu ga i prikaže, počinjući od gornje ivice prozora na dole.

Pravilo za pozicioniranje koje cemo koristiti ovom prilikom naziva se position. Postoje 4 osnovne vrednosti pravila position: static, fixed, absolute i relative.

Dodatni parametri koji se navode su left,right, top i bottom, tj. neka od kombinacija horizontalne i vertikalne vrednosti. (top+left, top+right, bottom+left ili bottom+right).

STATIC

Static je podrazumevani metod pozicioniranja primenjen na HTML elemente. Nije ga potrebno navoditi kao posebno pravilo.

Pomenute vrednosti left, right, top i bottom nemaju značaja za slučaj da je pravilo pozicioniranja static.

FIXED

Fixed pozicionicaranje podrazumeva fiksiranje jednog od uglova elementa u odnosu na prozor pretraživača. Element se uvek nalazi na toj poziciji, čak i u slučaju vertikalnog ili horizontalnog “skrolovanja” prozora. Elementi sa vrednošću fixed su totalno izmešteni iz normalnog toka dokumenta što znači da se element koji se u HTML-u nalazi ispod njih, pozicionira u odnosu na prvi “normalan” element koji se nalazi pre njih. Sintaksa koja se pridružuje elementu koji se pozicionira je sledeća:

div {position:fixed; left:25px; top:25px;}

Na slici ispod prikazana su četiri karakteristična slučaja fixed metoda pozicioniranja.

CSS-struktura-22

1,2,3, i 4 su div elementi proizvoljnih širina i dužina. CSS kod potreban za njihovo ispravno pozicioniranje izgleda ovako:

Div 1

div{position:fixed; top:25px; left:28px;}

Ovaj kod govori pretraživaču da pozicionira Div1 tako da mu leva ivica bude udaljena 28px od leve ivice prozora pretraživača, a gornja ivica 25px od gornje ivice pretraživača.

Div2

div{position:fixed; top:30px; right:20px;}

Ovaj kod govori pretraživaču da pozicionira Div2 tako da mu desna ivica bude udaljena 28px od desne ivice prozora pretraživača, a gornja ivica 30px od gornje ivice pretraživača.

Div3

div{position:fixed; bottom:50px; left:35px;}

Ovaj kod govori pretraživaču da pozicionira Div3 tako da mu leva ivica bude udaljena 35px od leve ivice prozora pretraživača, a donja ivica 50px od donje ivice pretraživača.

Div4

div{position:fixed; bottom:25px; right:35px;}

Ovaj kod govori pretraživaču da pozicionira Div3 tako da mu desna ivica bude udaljena 35px od desne ivice prozora pretraživača, a donja ivica 25px od donje ivice pretraživača.

Pogledajmo konkretan primer

<!DOCTYPE html>

<html>

<head>

<style>

#div1{position:fixed; top:25px; left:28px;width:100px;height:100px;background-color:red;}

#div2{position:fixed; top:30px; right:20px;width:100px;height:100px;background-color:green;}

#div3{position:fixed; bottom:50px; left:35px;width:100px;height:100px;background-color:blue;}

#div4{position:fixed; bottom:25px; right:35px;width:100px;height:100px;background-color:yellow;}

</style>

</head>

<body>

<div id=”div1″></div>

<div id=”div2″></div>

<div id=”div3″></div>

<div id=”div4″></div>

 

</body>

</html>

Pogled u pretraživaču

CSS-struktura-23

RELATIVE

Relative pozicioniranje služi za fino pozicioniranje u odnosu na trenutnu poziciju elementa. Ovo je prilično korisno kada radite sitne izmene na web strani. Da bi element koji trenutno zauzima neku poziciju na strani bio pomeren, tj. relativno pozicioniran u odnosu na trenutnu poziciju za 25px udesno, kod izgleda ovako:

div {position:relative; left:25px;}

Kod naveden iznad govori pretraživaču da sa leve strane elementa doda 25px, tj. pomeri ga udesno za tu vrednost. Vertikalna pozicija elementa se u ovom slučaju ne menja.

Relativno pozicioniranje koristi se i u slučaju elementa u odnosu na koji se pozicioniraju drugi elementi. Uslov je da se elementi sa apsolutnim pozicioniranjem nalaze unutar njega. U tom slučaju roditeljskom element obavezno je zadati samo position:relative; i apsolutno pozicionirani elementi će se pozicionirati u odnosu na njega.

CSS-struktura-24

Ako imamo div.glavni postavljen kao na slici iznad, i želimo da div-ove obeležene brojevima 1 i 2 pozicioniramo apsolutno u odnosu na njega, neophodno je roditeljskom divu, u ovom slučaju div.glavni dodeliti position:relative.

Zašto? Elementi koji se pozicioniraju apsolutno to čine u odnosu na prvi roditeljski element. Pa ako div.glavni ne bi imao definisanu poziciju relative, oni bi se pozicionirali u odnosu na body tag kao prvog relative roditelja.

ABSOLUTE

Absolute pozicioniranje se može shvatiti kao fixed, ali ne u odnosu na ivice prozora pretraživača, već u odnosu na roditeljski element u okviru koga se nalaze a koji je eksplicitno pozicioniran kao relative. Pogledajmo situaciju ispod.

CSS-struktura-25

Ako pogledamo sliku iznad, videćemo šta apsolutno pozicioniranje znači. Pretpostavka je da se div obeležen brojem 1 i div obeležen brojem 2 nalaze unutar diva koji ima klasu glavni. Pozicija diva glavni odredjena je normalnim tokom HTML dokumenta. Absolute pozicioniranje služi da se div1 i div2 pozicioniraju relativno u odnosu na glavni div. Ovo možemo zamisliti i kao fixed pozicioniranje s tim što bi u ovom slučaju glavni div bio jednak prozoru pretraživača.

Kod kojim bi se postiglo pozicioniranje ova dva elementa izgleda ovako:

div.glavni {position:relative;}

div1 {position:absolute; top:20px; left:25px;}

div2 {position:absolute; top:50px; right:10px;}

Prvi red govori pretraživaču da elemente koji se nalaze unutar njega sa pravilom position:absolute rasporedi relativno u odnosu na njegove ivice.

Drugi red govori pretraživaču da pronadje najbliži element unutar koga se nalazi div1 i da pomeri gornju ivicu diva div1 za 20px nadole i za 25px levo levu ivicu diva div1. Slična stvar se ponavlja i u trećem redu a odnosi se na pozicioniranje diva div2 u odnosu na roditeljski div.

Apsolutno pozicioniranje dobro je u slučaju kada želimo da u odnosu na neku sliku postavimo tekst koji prelazi preko nje, na primer:

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>Pozicioniranje elemenata kreiranjem DIV-ova</title>

<style>

div#prvi{position:relative;background-color:grey;width:150px;height:100px;}

h1{position:absolute;bottom:0px;left:10px;color:white;font-size:12px;}

</style>

</head>

<body>

<div id=”prvi”>

<h1>Naslov slike</h1>

<img src=” kafe1.png”>

</div>

</body>

</html>

CSS-struktura-26

Kao što možete videti, tekst je postavljen apsolutno u odnosu na div u kome se nalazi (zajedno sa slikom)

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn