skip to Main Content

Jedna od glavnih dilema pri izradi veb sajta jeste pozicioniranje elemenata u CSS-u. Ovde u pomoć dolazi CSS property koji se naziva position. On nam pomaže da manipulišemo lokacijom elementa.

CSS svojstvu position možemo dodati sledećih šest vrednosti:

 

  • static
  • relative
  • absolute
  • fixed
  • sticky
  • inherit

 

Pozicioniranje elemenata u CSS-u

U nastavku ćemo detaljnije objasniti svaku od ovih vrednosti, koje se koriste za pozicioniranje elemenata u CSS-u.

 

Absolute

Ovo je vrlo moćan tip pozicioniranja koji vam omogućava da doslovno postavite bilo koji element stranice tačno tamo gde želite. Atribute pozicioniranja koristite gore, levo, dolje i desno da biste postavili lokaciju. Zapamtite da će ove vrednosti biti u odnosu na sledeći nadređeni element sa relativnim (ili apsolutnim) pozicioniranjem. Ako ne postoji takav roditelj, podrazumevano će se vratiti sve do samog elementa <html>, što znači da će biti postavljeno u odnosu na samu stranicu.

Kompromis (i najvažnija stvar koju treba zapamtiti) oko apsolutnog pozicioniranja je taj što se ti elementi uklanjaju iz toka elemenata na stranici. Drugi elementi ne utiču na element sa ovom vrstom pozicioniranja i ne utiču na druge elemente. Ovo je ozbiljna stvar koju treba uzeti u obzir svaki put kada koristite apsolutno pozicioniranje. Njegova prekomerna upotreba ili nepravilna upotreba može ograničiti fleksibilnost vaše veb lokacije.

Ako podređeni element ima apsolutnu vrednost, tada će se nadređeni element ponašati kao da dete uopšte nije tamo.

Na slici možete da vidite dva div-a sa visinom i širinom od 100 px. Kao što je poznato div je block element i zato se kvadrati (div-ovi ) pozicioniraju jedan ispod drugog.

Pozicioniranje elemenata u CSS-u

Ako bi smo donjem (zelenom kvadratu) elementu dali position: absolut, top:0, left:0 vrednosti on bi se ponašao kao na slici ispod.

Pozicioniranje elemenata u CSS-u

Element se pozicionirao u odnosu na sam dokument van svakog toka html strane. Treba zapamtiti da ako bi se ovaj div (zeleni kvadrat) nalazio u nekom elementu, on bi se pozicionirao u odnosu na njega. Naravno ako taj element ima absolut ili relative poziciju.

 

Fixed 

Fixed vrednost je slična apsolutnoj, jer vam može pomoći da postavite element bilo gde u odnosu na dokument, ali pomeranje ne utiče na ovu vrednost. Iz čega proizilazi da će ovaj element ostati fiksiran u odnosu na stranu. Kako god vi skrolovali mišem gore-dole, element ostaje na mestu na kom je bio pre nego smo pomerili tok stranice.

 

Sticky

Sticky vrednost je poput kompromisa između relativne i fiksne vrednosti. Ovo je trenutno eksperimentalna vrednost, što znači da nije deo zvaničnih specifikacija i samo su ga delimično prihvatili izabrani pretraživači. Drugim rečima, verovatno nije najbolja ideja da se ovo koristi na veb lokaciji za produkciju uživo.

Šta radi? Pa, omogućava pozicioniranje elementa u odnosu na bilo šta u dokumentu, a zatim, kada se korisnik pomakne pored određene tačke u okviru za prikaz popravlja položaj elementa na toj lokaciji tako da ostane prikazan kao element sa fiksnom vrednošću.

Uzmimo sledeći primer:

 

.element {

Position:sticky;

top: 50px;

}

 

Element će biti relativno pozicioniran sve dok lokacija pomicanja vidnog polja ne dostigne tačku u kojoj će element biti 50 piksela od vrha vidljive oblasti. U tom trenutku element postaje lepljiv i ostaje na fiksnom položaju na vrhu ekrana od 50 piksela.

 

Relative

Ova vrsta pozicioniranja verovatno najviše zbunjuje. Ono što zaista znači je „samo po sebi“. Ako postavite position relative na elementu, ali bez ikakvih drugih atributa pozicioniranja (gore, levo, dole ili desno), to uopšte neće uticati na njegovo pozicioniranje. Stajaće tačno onako kako bi bilo da ste ga ostavili kao položaj: static;  Ali ako mu date neki drugi atribut pozicioniranja, recimo, top: 30px pomeriće svoju poziciju za 30 piksela prema dole sa mesta na kojem bi inače bio. Prikazaćemo ovo na sledećoj fotografiji.

Pozicioniranje elemenata u CSS-u

Sigurni smo da možete da zamislite da je mogućnost pomeranja elementa na osnovu njegovog redovnog položaja prilično korisna. Ovu opciju možemo da koristimo za poravnavanje elemenata forme koji imaju tendenciju da ne žele da se poređaju onako kako želimo. Postoje još dve stvari koje se dešavaju kada postavimo položaj: relativan na elementu kojih bi trebalo da budete svesni.  Jedan je taj što uvodi mogućnost upotrebe z-indeksa na tom elementu, koji ne radi sa statički pozicioniranim elementima. Čak i ako ne podesite vrednost z-indeksa, ovaj element će se sada pojaviti na vrhu bilo kog drugog statički pozicioniranog elementa. Ne možete se boriti protiv toga postavljanjem veće vrednosti z-indeksa na statički pozicioniranom elementu.

Pozicioniranje elemenata u CSS-u

Druga stvar koja se dešava je da ograničava opseg apsolutno postavljenih podređenih elemenata.  Bilo koji element koji je podređen relativno pozicioniranom elementu može biti apsolutno pozicioniran unutar tog bloka.

 

Static

Ovo je podrazumevano za svaki pojedinačni element stranice. Različiti elementi nemaju različite podrazumevane vrednosti za pozicioniranje, svi počinju kao statični. Statičnost ne znači mnogo; to samo znači da će element ući u stranicu kao i obično. Jedini razlog zbog kojeg biste ikada postavili element na poziciju: static; je da prinudno uklonite neko pozicioniranje koje je primenjeno na element van vaše kontrole.

 

Inherit

Nasleđivanje pozicioniranja izričito postavlja vrednost roditelja (ako je roditelj pozicija: absolute, dete će biti pozicija: absolute; ako je roditelj pozicija: fixed, dete će biti pozicija: fixed).

 

Za još vesti i interesantnih priča iz digitalnog marketinga posetite našu blog stranu ili zapratite naš Instagram profil.

Pozicioniranje elemenata u CSS-u

Made by Miloš Stojanović – Senior Web Developer @Digitizer