Pozitionarea CSS absoluta a elementelor HTML in elemente relative.

Din lipsa de timp am decis sa tratez un articol usor despre CSS, mai exact pozitionarea absoluta a elementelor CSS. Si mai exact de atat pozitionarea absoluta a elementelor care sunt descendenti a unui element pozitionat relativ. Dar deja imi pare complicat ce am zis, dar cu ajutorul a catorva imagini si a unor bucati de HTML si CSS totul va deveni clar.

In primul rand: pozitionarea absoluta in CSS inseamna stabilirea distantei unui obiect, fie el block level sau inline fata de marginile viewportului (suprafata din browser alocata pentru randarea unui site). Aceste distante pot fi specificate fata de stanga (left), sus (top), dreapta (right) si jos (bottom). Valorile pentru aceste reguli pot fi specificate in pixeli, procente, em si orice alta unitate CSS valida. Dar scopul acestui articol nu este insa explicarea pozitionarii absolute, banuiesc ca oricine stie putin CSS este in tema cu pozitionarea absoluta.

Foarte multa lume se fereste de schimbarea tipului de pozitionare fie el fixed, relative sau absolut. Si pe buna dreptate elementele trebuie lasate in flowul natural al paginii. Mai ales in cazul pozitionarii absolute cand elementul sare din design. Dar, cum spuneam mai sus atunci cand un element descendent unui element pozitionat relativ este pozitionat absolut el se raporteaza la marginile elementului parinte si nu la marginile browserului! Si deja pozitionarea devine foarte flexibila, mai ales in cazul designurilor cu latime fixa.

Sa consideram urmatorul markup:

<html>
  <head>
    <title>Exemplu pozitionare CSS absolut</title>
    <link rel="stylesheet" href="style.css" >
  </head>
  <body>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis ornare enim.
    Duis a rhoncus eros. Aenean condimentum Duis fermentum imperdiet sem vitae cursus.
    Etiam eros nisi, vulputate sed mattis sit amet, fringilla vitae erat.
    Quisque tortor orci, suscipit vitae condimentum nec, molestie at lorem.
    Donec mattis eleifend orci, et elementum quam rutrum at. Sed orci nulla,
    rhoncus ut euismod eu, auctor eget nunc. Aliquam accumsan libero ac lacus
    ultricies id mollis tellus varius.
    </p>
    <p>
    Vivamus pulvinar, risus non facilisis tincidunt,
    ante est euismod mi, nec condimentum urna mauris nec eros. Maecenas augue
    accumsan. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
    cubilia Curae; Sed a consectetur orci. Cras in massa quis erat consequat eleifend
    a et nulla.
    </p>
    <div id="parinte">
      <div id="copil">
         La data acestui articol abia aflasem de 2 luni despre
          tehnica asa.
      </div>
    </div>
    <p>
    Nunc velit a lorem. Curabitur neque nisl, condimentum sed commodo at, auctor et nisi.
    Pellentesque eu augue diam. Curabitur quis velit in neque iaculis porttitor. Aenean eros
    erat, dapibus sit amet tristique ac, rutrum et magna.
    </p>
    <p>
    Phasellus et neque a justo bibendum facilisis. Sed
    </p>
  </body>
</html>

Si urmatorul fisier css:

#parinte{
 border: 1px solid red;
 width: 600px;
 height: 150px;
}

#copil{
 width: 250px;
 height: 50px;
 background: red;
 color: white;
 font-weight: bold;
}

Impreuna genereaza pagina din imagine:

Ignorand latina suspecta, observam ca sunt 2 divuri numite parinte si copil primul fiind cel cu bordura rosie iar al doilea cel cu fundalul rosu.

#parinte{
 border: 1px solid red;
 width: 600px;
 height: 150px;
}

#copil{
 width: 250px;
 height: 50px;
 background: red;
 color: white;
 font-weight: bold;
 position: absolute;
 bottom: 0px;
 left: 0px;
}

Daca adaugam cateva reguli elementului copil pagina va arata ca in imaginea urmatoare:

Este irelevant momentan, pentru ca elementul pur si simplu s-a mutat in coltul din stanga jos al viewportului. Dar, daca adaugam o singura regula, si anume position: relative elementului parinte…

#parinte{
 border: 1px solid red;
 width: 600px;
 height: 150px;
 position: relative;
}

#copil{
 width: 250px;
 height: 50px;
 background: red;
 color: white;
 font-weight: bold;
 position: absolute;
 bottom: 0px;
 left: 0px;
}

se intampla ceva foarte relevant:

Divul copil s-a mutat in coltul din stanga jos al divului parinte. Un asemenea comportament poate fi foarte util in cadrul unor designuri mai complicat de atins cu ajutorul floaturilor, ramanand doar la imaginatia integratorului. De asemenea nu par sa fie complicatii cross-browser (testat pe IE8, FF 3.5, Opera 10 si Chrome).

Mai mult, se pot face pozitionari in afara elementului parinte, ceea ce din nou ar putea ajuta foarte mult in cadrul unor designuri complexe.

La schimbarea valorilor din fisierul CSS se poate obtine un efect interesant. In exemplul meu divul copil are inaltimea de 50 pixeli, astfel, schimb CSS-ul in felul urmator:

#parinte{
 border: 1px solid red;
 width: 600px;
 height: 150px;
 position: relative;
}

#copil{
 width: 250px;
 height: 50px;
 background: red;
 color: white;
 font-weight: bold;
 position: absolute;
 bottom: -40px;
 left: 0px;
}

Schimbarea noua genereaza pagina ca in imaginea urmatoare:

Acum divul copil s-a pozitionat pe bordura divului parinte, iar pentru ca este absolut apare deasupra paragrafului de sub divul parinte. Desi pare inutil in acest caz, proprietatea acesta de pozitionare este foarte eficienta in cadrul multor designuri.

Prin urmare aceasta metoda de pozitionare poate scapa un developer de diverse probleme cu anumite elemente al caror pozitie in designul siteului ar putea creea probleme in cazul layoutului cu floaturi.