Poziţionarea obiectelor

Poziţionarea obiectelor

Poziţionarea permite aşezarea unui obiect într-un anume loc întrebuințând coordonatele. Concomitent 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), in (inci), pt (puncte), ems, procentaje sau cm (centimetri).

Poziţionarea absolută plasează obiectul în pagină exact în locaţia dată de left şi top. Astfel poate fi creat un element neocupat faţă de celelalte din pagină. Obiectul poate fi orice, de exemplu text sau imagine.

Exemplu: am aplicat pozitionarea absolută etichetei h4:

Cod:

<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 naturală pe care o ocupă un element, după elementele anterioare şi anterior 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 perfect celalalt relativ:

Cod:

<html>
<head>
<title>Exemplu 8_2</title>
<style type="text/css">

</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>

Poziţionarea tridimensională
Elementele sunt poziţionate pe ecran pe o suprafaţă bidimensională dar pot fi aşezate şi unul deasupra celuilalt, într-o stivă utilizând un indicativ (index-z) începând cu 0, următorul 1 şi tot aşa în continuare. Elementul cu indexul cel mai mare este aşezat deasupra.

Exemplu: am întrebuințat două obiecte unul poziţionat absolut celalălt relativ:

Cod:

<html>
<head>
<title>Exemplu 8_3</title>
<style type="text/css">

</style>
</head>
<body>
<div class="element1"><img src="poza.jpg"></div>
<div class="element2"><img src="poza.jpg"></div>
<div class="element3"><img src="poza.jpg"></div>
</body>
</html>