Stiluri CSS Poziţionare obiecte în pagină Poziţionarea permite aşezarea unui obiect într-un anume loc folosind coordonatele. Totodată obiectele pot fi poziţionate pe straturi diferite, unul deasupra celuilalt. Atât poziţionarea absolută (ASOLUTE) cât şi cea relativă (RELATIVE) folosesc proprietăţile LEFT şi TOP exprimate în px (pixeli), în (inci), pt (puncte), ems, procentaje sau cm (centimetri).
Poziţionarea absolută plasează obiectul în pagină exact în locaţia dată de left şi top(colţul stânga-sus al paginii). Astfel poate fi creat un element liber faţă de celelalte din pagină. Obiectul poate fi orice, de exemplu text sau imagine. Exemplu: am aplicat poziţionarea absolută etichetei h4 <html> <head> <title>Exemplu 8_1</title> </head> <body> <h4 style="position: absolute; left: 50px; top: 50px">Text 1</h4> <h4 style="position: absolute; left: 100px; top: 200px">Text 2</h4> </body> </html>
Poziţionarea relativă este poziţia normală pe care o ocupă un element, după elementele anterioare şi înaintea celor următoare. Poate fi deplasat faţă de această poziţie folosind proprietăţile left şi top. Exemplu: am folosit două obiecte, unul poziţionat absolut, celălalt relativ <html> <head> <title>Exemplu 8_2</title> <style type="text/css"> <!-.absolut {position: absolute; left: 200px; top: 150px;} .relativ {position: relative; left: 50px; top: 50px;} --> </style> </head> <body> <div class="absolut">Pozitionare absoluta, independent de celelate obiecte din pagina</div> Text <div class="relativ">Pozitionare relativa, dupa "Text"</div> </body> </html>
1