CSS Tip Nr. 2. CSS Postioning in citiva pasi.

In acest post, voi descrie diferite proprietati ale layout existente in CSS: position:static, position:relative, position:absolute, si CSS float.

1. position:static
Pozitionarea implicita a tuturor elementelor HTML este position:static, ceia ce inseamna ca elementul in realitate nu este pozitionat si apar in documentul  HTML unde vor, sau sunt impinse.
In mod normal n-am dori sa specificam aceasta regula CSS, numai cu exceptia cind dorim sa suprascriem regula unei pozitionari care a fost stabilita anterior.
CSS Exemplu:

#container {
   position:static;
}  

2. position:relative
Daca specificam position:relative, atunci putem folosi: top, bottom si left, right pentru a muta elementul HTML unde normal am dori sa apara.
Urmatorul exemplu va demonstra cum putem muta un HTML element in jos cu 20px, si la stinga  cu 40px.
CSS Exemplu:

#container {
 position:relative;
 top:20px;
 left:-40px;
}  

De notat, spatiul unde blocul nostru ar fi fost daca nu l-am fi mutat, acum este un spatiu gol. Urmatorul element nu se va muta atunci cind mutam elementul curent.
La prima vedere se pare ca position:relative nu este foarte util, dar nu este asa, o sa ne convingem mai tirziu.

3. position:absolute
Cind setam position:absolute atunci elementul este scos de pe pozitia unde se afla si este postat acolo unde noi il directionam.
Daca dorim sa mutam un HTML element in poartea: sus dreapta a paginii HTML atunci e nevoie sa scriem ceva de genul ce e scris in urmatorul exemplu:
CSS Exemplu

#container {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

De notat ca in browserul IE este un bug: daca specificam o lungime relativa (cum ar fi width:50%) atunci lungimea lungimea va lua ca reper elementul parinte, in loc de pozitionarea elementului.

4. posion:relative + position:absolute
Daca setam pentru un div element (il numim container1) position relative, orice alt element care se contine in acest div container1 va fi pozitionat relativ fata de el. Atunci daca setam absolute positioning  div-ului copil(subcontainer1) putem sa-l mutam top, right fata de container1.

Exemplul CSS

#container1 {
 position:relative;
}
#subcontainer1 {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

5. Doua coloane position:absolute
Dupa cele citite mai sus putem crea un layout cu doua coloane folosind relative si absolute positioning.

#div-1 {
 position:relative;
 height:250px;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

Un avantaj al absolute positioning este ca putem pozitiona elementele in orice ordine
in pagina indiferent de ordinea in care apar in HTML document.

6. Cum pozitionam doua coloane position:absolute?
O solutie este sa setam inaltime fixata elementelor.
Insa acest lucrul nu este o solutie viabila pentru majoritatea designelor pentru ca nu se stie
volumul textului care va fi in blocuri sau marimea fontului care va fi utilizata.

#container {
 position:relative;
 height:250px;
}
#subcontainer1 {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#subcontainer2 {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

7. CSS Float
Pentru coloanele cu inaltimea variabila, absolute positioning nu functioneaza, deci trebuie sa gasim alta solutie.
Putem sa folosim float pentru a-l putea impinge cit mai departe la stinga sau la dreapta si sa lasam textul din blocul parinte sa-l "inconjoare". De obicei este folosit pentru imagini, dar poate la nevoie fi folosit si pentru blocuri textuale de inaltimi diferite.
CSS Exemplu

#container {
 position:relative;
 height:250px;
}
#subcontainer1 {
 float:left;
 width:200px;}
#subcontainer2 {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

8. Aranjarea a doua coloane cu ajutorul CSS float
Daca vom seta pentru doua elemente HTML float:left atunci ele se vor "impinge" ambele spre partea stinga a paginii HTML.