Blog

Pozicioniranje elemenata u web dizajnu

Razumevanje pozicioniranja elemenata na web strani je jedna od stvari koja je jako važna kako bi se postigao pun efekat responsive web dizajna. Ovo takođe pomaže da se dizajneri i developeri jasno razumeju i dođu do pravih rešenja. Ok je kada se dizajn uradi u nekom o grafičkih editora (PS, Illustrator) ali takođe treba imati u vidu i neke druge stvari koje se dešavaju na web strani kao na primer skrolovanje, veličina ekrana određenog uređaja i mnoge druge faktore.

Različiti tipovi pozicioniranja u web dizajnu su nazvani prilično konfuznim imenima – Static, Absolute, Relative i Fixed – gde na primer Static ne znači stvarno da je element statičan na web strani. Kako bi što bolje razjasnili stvari, u ovom tekstu će kroz gifove biti predstavljeni napred navedeni pojmovi sa kratkim tekstualnim objašnjenjem.

Z-index

Z-index_FROONT

Z-index predstavlja jednostavan način da se kaže koji elemenat je ispred još jednog sličnog sloja u statičkom delu dizajna web aplikacije. Z-index je css property. Elemenat sa većom vrednošću z-indexa će biti ispred elementa sa manjom z-index vrednošću.

Static position

02-Static-position-FROONT

Glavni podrazumevani (default) tip pozicioniranja. Iako sugeriše da se ništa ne pomera i da je statično (static) ipak se ne radi o tome. Statični elementi su statični na normalan flow web strane, odn. elemenat dolazi posle elementa na web strani.

Absolute position

03-Absolute-position-FROONT

Absolute pozicioniranje je direktno vezano za X i Z parametre samog elementa na strani. Absolute pozicioniranje elementa nam govori da ovi elementi ne prate normalan flow strane i da su nezavisni u svom univerzumu. Absolute elementi će se pojaviti na vrhu bilo kog statički pozicioniranog elementa.

Relative position

04-Relative-position-FROONT

Ovako pozicionirani elementi prate normalan flow web stranice ali se njihovo pozicioniranje određuje dalje tako da će se ovi objekti nalaziti tamo gde ih vi postavite.

Fixed position

05-fixed-position-FROONT

Fixed pozicioniranje znači da će pozicija elementa uvek biti zaključana do veličine prozora web browsera. Ovo znači da će objekat koji je pozicioniran na ovaj način ostati vezan za fiksnu tačku na ekranu i neće se pomerati. Ovakav način pozicioniranja je koristan za statičke navigacije, promo banere itd.

izvor: http://blog.froont.com/

About the author

dezareo

Piše o WordPress-u. Podstiče na akciju, deli ideje i motiviše ljude. U slobodno vreme trči, vozi bicikl, skija. Netaletnovan ali tvrdoglav gitarista.

Add Comment

Click here to post a comment

Leave a Reply

@WPSerbia

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Join 103 other subscribers

%d bloggers like this: