background image
glavni reklamni bannerglavni reklamni bannerglavni reklamni bannerglavni reklamni banner
Objavljeno: 13.12.2011 u 02:23.| Izvor: Simple.ba| Autor: Edin Šalja

Pozicioniranje HTML elemenata pomoću CSS-a

Tutorijal koji govori o tome na koji način možemo iskoristiti atribut "position" u css-u i njime pozicionirati css box modele.
Slika: Pozicioniranje HTML elemenata pomoću CSS-a

veličina teksta 

Pokušaću vam objasniti kako se pozicioniraju HTML elementi pomoću CSS-a. Za pozicioniranje se koristi atribut (property) position.
Da biste mogli razumjeti pojam pozicioniranja, potrebno je prvo naučiti šta je css box model. Detaljno objašnjenje box modela možete naći u jednom od prethodnih postova – CSS Box Model – pa predlažem da počnete od toga.
Atribut position može imati sljedeće vrijednosti: static, inherit, fixed, relative i absolute.


Prve dvije vrijednosti koja ću objasniti su static i inherit:

Static – Ovo je osnovna vrijednost (default value) za pozicioniranje. U suštini svaki element za koji nije posebno deklarisana relativna, fiksna ili apsolutna vrijednost, poziconiran je statički – tj. nije pozicioniran. Na ovakve elemente neće uticati deklaracije za pozicioniranje kao npr. top, bottom, left, z-index. Oni se nalaze unutar normalnog toka html dokumenta.

Inherit – Elementi kojima je dodijeljena vrijednost inherit naslijediće vrijednosti za pozicioniranje koje ima element u kome se nalaze, tj. parent element. Treba naglasiti da vrijednost inherit ne podržava niti jedna verzija Internet Explorera.

 

Sada prelazimo na preostale tri vrijednosti, koje ćete često koristiti – fixed, relative i absolute:

Fixed – Fiksno pozicioniranje podrazumjeva da je elemenat pozicioniran fiksno u odnosu na prozor browsera. To znači da se on neće pomjerati čak i kada korisnik skroluje stranicu.

Elementi koji su pozicioniran na ovaj način se uklanjaju iz normalnog toka html dokumenta. Svi ostali elementi se ponašaju kao da taj fiksirani elemenat više ne postoji. Za određivanje pozicije fiksnih elemenata koriste se vrijednosti atributa top, right, bottom i left.

Relative – Pod relativnim pozicioniranjem se podrazumjeva da je elemenat pozicioniran relativno u odnosu na svoju prvobitnu poziciju. Ovako pozicionirani elementi se mogu pomjerati i preklapati sa drugim elementima. Međutim, za razliku od fiksnog pozicioniranja, kada je neki elemenat relativno pozioniran on i dalje ostaje u normalnom toku hmtl dokumenta. Tj. ne biva uklonjen iz normalnog toka, te za njega i dalje ostaje sačuvano mjesto.
Kao i kod fiksnog pozicioniranja, za određivanje pozicije elementa se koriste vrijednosti atributa top, right, bottom i left.Relativno pozicionirani elementi se često koriste kao kontejneri ili omotači za apsolutno pozicionirane elemente. Na primjer, apsolutno pozicionirana slika ili paragraf unutar relativno pozicioniranog div-a.

Absolute – Pod apsolutnim pozicioniranjem se podrazumjeva da je elemenat pozicioniran apsolutno u odnosu na prvi parent element (tj. elemenat u kome se nalazi) a koji ima bilo koju vrijednost za pozicioniranje osim static. Ako ne postoji neki takav parent element, onda se za tačku pozicioniranja uzima početni tag.
Apsolutno pozicionirani elementi se izuzimaju iz normalnog toka html dokumenta, a svi ostali elementi se ponašaju kao da oni više ne postoje. Tj. za njih neće biti sačuvano mjesto kao za relativno pozicionirane elemente.
I ovdje se, kao kod fiksnog i relativnog pozicioniranja, za određivanje pozicije elementa koriste vrijednosti atributa top, right, bottom i left.

 

Ocijenite vijest

Prosječna ocjena: odlična


Vijesti

proizvodnja_i_prodaja_profesionalnih_rjesenja_za_rastjerivanje_ptica
Alibeg.ba - zaštita od ptica
Proizvodnja i prodaja profesionalnih rješenja za rastjerivanje ptica
prodaja_ribolovne_opreme
Riba.ba - prodaja ribolovne opreme
Prodaja ribolovne opreme
sarajevo_nekad_i_sad
Android aplikacija
Sarajevo nekad i sad
nova_referenca_web_site_kompanije_general_logistic_d.o.o.
Nova referenca
Nova referenca: Web site General Logistic d.o.o.
nova_stara_refenca_redizajn_web_news_portala_televizije_sarajevo
Web portal
Nova stara refenca: Redizajn web news portala Televizije Sarajevo

 

Facebook preporuke

Simple reklame

Google reklame

_ _ _ _ _ _ _ _ _