CSS Osnove

FLOAT

Pored nabrojanih metoda pozicioniranja postoji još jedno pravilo koje u suštini radi sličnu stvar, tj. pozicionira element u odnosu na roditeljski element. To pravilo zove se float i može imati vrednosti: left, right i none. Ako pogledamo sliku ispod:

CSS-struktura-27

Na njoj vidimo div klase glavni unutar koga se nalaze dva diva na koje je primenjeno float pravilo. Da bi float pravilo ispravno prikazali, neophodno je svim elementima definisati širinu.

div.glavni { width:750px;}

div.levi { width:250px; float:left;}

div.desni { width:270px; float:right;}

Kao što vidite na slici, kod koji je napisan sugeriše pretraživaču da element div.levi postavi uz svoju levu ivicu a div.desni uz svoju desnu ivicu. Za razliku od klasičnog pozicioniranja gde su korišćeni parametri left, right, top, bottom, isti efekat moguće je postići i ovde ali na drugi način – korišćenjem pravila margin. Na primer, ako bi hteli da div.levi bude pomeren od gornje ivice za 20px i 15px ulevo, modifikovano pravilo bi bilo zapisano kao:

div.levi { width:250px; float:left; margin-left:15px;margin-top:20px;}

Da bi bili sigurni da je div.glavni po visini produžen toliko da zaista obuhvata oba diva koja se u njemu nalaze, na njega ćemo primeniti pravilo overflow:auto; koje govori pretraživaču da po visini produži element tako da svakako obuhvati sve elemente koji se u njemu nalaze.

Drugi način je da pred kraj roditeljskog diva, odmah iznad njegovog zatvarajućeg taga, postavimo prazan div sa inline stilom clear:both;

<div class=”glavni”>

<div class=”levi”>

Sadrzaj

</div>

<div class=”desni”>

Sadrzaj

</div>

<div style=”clear:both;”></div>

</div>

Pozicioniranje po z osi

Pod pozicioniranjem po z osi zamišljamo situaciju u kojoj se odredjeni elementi preklapaju ili nalaze na istom mestu. Primer ispod:

CSS-struktura-28

Ovde vidimo situaciju u kojoj se div 1 i div 2 preklapaju. Sivi pravougaonik je “iznad” crvenog za slučaj da se u HTML kodu nalazi nakon koda za div 1. Za slučaj da želimo obrnutu situaciju, koristićemo pravilo z-index i dodeliti mu neku vrednost veću od 1, koja je podrazumevana.

div.1 { z-index:10;}

U tom slučaju, iako se nalazi ranije u kodu od koda za div2, slika će izgledati ovako:CSS-struktura-29

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