Uvod

Pozicioniranje sadržaja sa CSS-om je moguće uraditi na više načina, koje će svojstvo biti korišćeno zavisi od specifičnosti layout-a, i od zahteva za podržanost sintakse u browser-ima. Osnovna tehnika za pozicioniranje sadržaja je svojstvo position. Ukoliko je vrednost svojstva: relative, absolute ili fixed, dostupna su i dodatna svojstva: top, right, bottom, left.
Kao jedno od rešenja za pozicioniranje sadržaja se može koristiti osobina float, ali je trend je da se ova osobina što manje koristi (tj. da se koristi samo za “obavijanje teksta oko bloka”).
Tehnika koja je preporučena i podržana od većine novijih browsera, podrazumeva korišćenje CSS svojstva “display:flex”. Smatra se da svojstvo “display:grid” ima odličan potencijal, ali će morati da se sačeka korišćenje u praksi dok je ne usvoje svi browser-i.

Svojstvo “position”

Vrednosti svojstva position mogu biti:

  • static (podrazumevana vrednost, primenjena čak i ukoliko se ne koristi svojstvo position)
  • relative
  • absolute
  • fixed
  • sticky (eksperimentalno)

Static

Pozicioniranje elemenata bez specifičnog pozicioniranja se naziva statično. Smatra se za podrazumevano ponašanje i ne mora biti direktno deklarisano sa “position: static”:

See the Pen Position demo – static by Web programiranje (@chos) on CodePen.

Relative

Relativno pozicioniranje se koristi kada treba pomeriti elemenat u odnosu na poziciju na kojoj bi se inače nalazio (kada bi se primenjivalo “statično” pozicioniranje). Nakon korišćenja pravila “relative” možemo koristiti dodatna svojstvima za pozicioniranje: top, right, bottom, left. Ova dodatna svojstva definišu rastojanje u odnosu na mesto gde bi se elemenat podrazumevano nalazio. Element koji ima definisano svojstvo “relative” je isto pozicioniran kao sa svojstvom “static”, sve dok se ne primeni neko od naknadno omogućenih svojstava (top, right, bottom ili left).

See the Pen Position: relative by Web programiranje (@chos) on CodePen.

Kao što se vidi “Box 2” je pomeren ali mesto gde bi se nalazio bez dodatnog pozicioniranja je i dalje “okupirano”, pa se “Box 4” nije pomerio na gore.

Fixed

“Fiksiran” element je vezan za okvir prozora (eng. viewport), pa ostaje uvek na istom mestu nezavisno od toga da li se stranica skroluje.

See the Pen Position: fixed by Web programiranje (@chos) on CodePen.

Absolute

Absolutno pozicioniran element se ponaša slično kao “fiksiran” element stim što njegova pozicija nije vezana za okvir prozora, nego za prvi (najbliži) roditeljski element koji nije statično pozicioniran elemenat. Ukoliko elemenat nema ni jedan takav roditeljski element, on se “vezuje” za body element.

See the Pen Absolutno pozicioniranje by Web programiranje (@chos) on CodePen.

Na prethodnom primeru je Box 3 absolutno pozicioniran, a njemu prvi “nestatični” roditeljski element je Box 2. Stoga je Box 3 vezan za ivice Box2. Da nije bilo roditelja koji nije statično pozicioniran, Box 3 bi se vezao za body element, kao što se vidi na sledećem primeru.

See the Pen egjaaV by Web programiranje (@chos) on CodePen.


Svojstvo “float”

Korišćenjem ovog svojstva se elemantima ne ukazuje gde treba da se nadju, nego im se prepušta da sami nadju svoju poziciju pridržavajući se odredjenih pravila. U zavisnosti od vrednosti svojstva (left ili right) element koji nije rasporedjen će da “teče” u tom smeru. Elementi na kojima je primenjeno svojstvo float se ponašaju kao blokovi, tj. kao da im je zadato svojstvo “display blok”.

Standardno “tečenje”

Primer: tečenje na jednu stranu

U ovom primeru prvi element koji ima vrednost |float:left” će teći od krajnje desne ivice na levo sve dok ne nadje svoje mesto. Svaki naredni će težiti da se tečenjem pozicionira desno od prethodnog elementa. Ukoliko blok nema mesta da se pozicionra desno od poslednjeg elementa, on se spušta ispod bloka koji mu smeta i ponovo teče na levo (“na novom nivou”). Ovo se najbolje vidi na sledećem primeru.

See the Pen Float by Web programiranje (@chos) on CodePen.

Primer: tečenje na obe strane

U ovome primeru se istovremeno koristi tečenje na levo i na desno:

See the Pen Float 2 by Web programiranje (@chos) on CodePen.

Prvi blok sa svojstvom float:right (“NA DESNO 1”) se nije pozicionirao u gornjem desnom uglu, kao što bi se na prvi pogled očekivalo. Ovo se dešava jer je prethodni float blok postavljen niže (nije bitno što je float:left), pa i blok “DESNO 1” mora da bude u njegovom nivou.

Obavijanje teksta oko float elementa

Pozicioniranje sadržaja sa svojstvom float može biti veoma zahtevno pa se zbog toga sve manje koristi, a primat preuzimaju jednostavnije metode (flex, grid…). Ipak smatra se da je svojstvo float nezamenjivo kada je u pitanju “obavijanje bloka” tekstom. Tekst se on trudi da bude što bolje uklopljen u prostor koji mu je na raspolaganju i obavija blok.

See the Pen zNJvzM by Web programiranje (@chos) on CodePen.

Prelamanje toka

Kada želimo da neki float element krene iz novog reda potrebno je da primenimo svojstvo clear koje mu zabranjuje da se kao float blok zalepi za drugi float blok. Ovaj blok i dalje ima svojstovo float, ali će se postaviti uz ivicu roditeljskog elementa.

Primer

U ovom primeru smo bloku “4” definisali svojstvo “clear: left”, pa se ovaj blok “ne lepi” za prethodni float elemenat, nego ide u novi red i lepi se za levu ivicu.

See the Pen Prelom float-a by Web programiranje (@chos) on CodePen.

Ukidanje svojstva float

Jedna od metoda je da se ubaci prazan blok koji ima svojstvo clear: both;

Drugi način je korišćenje pseudo selektora koji pravi posle float elementa novi “nevidljivi” blok koji ima svojsto “clear: both”.

Problem sa visinom roditeljskog elementa

Floatovani elemenat ne utiče na visinu svoga roditelja. Stoga ukoliko je sadržaj roditeljskog bloka manji po visini od “floatovanog” elementa, “floatovani” element će da štrči. Još ekstremniji slučaj je kada roditeljski blok ima samo “decu” sa svojstvom float, tada uopšte neće imati visinu! Pogledajte sliku desno. Ovaj problem se rešava dodavanjem svojstva roditeljskom elementu overflow: auto;

See the Pen rešenje float roditelja by Web programiranje (@chos) on CodePen.

Podelite:

Ostavite komentar