sursa: http://www.drogoreanu.ro/tutorials/css8.php
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ă (ABSOLUTE) cât şi cea relativă (RELATIVE) folosesc proprietăţile LEFT şi TOP exprimate în px (pixeli), în (inci), pt (puncte), procentaje sau cm (centimetri).
Poziţionarea absolută plasează obiectul în pagină exact în locaţia data de left şi top. 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 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 inaintea celor următoare. Poate fi deplasat faţă de această poziţie folosind proprietăţile left şi top.
Exemplu: am folosit doua obiecte, unul poziţionat absolut, celălalt relativ
<html>
<head>
<title>Exemplu 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>
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 (z-index) î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 folosit 5 obiecte poziţionate absolut
<html>
<head>
<title>Example | CSS Tutorial | HTML.net</title>
</head>
<body>
<h1>Anotimpurile</h1>
<div style="position:absolute;left: 100px;top:100px;z-index:1;">
<img src="primavara.jpg" alt="primavara" width=250 height=200>
</div>
<div style="position:absolute;left: 125px;top: 125px;z-index: 2;">
<img src="vara.jpg" alt="vara" width=250 height=200>
</div>
<div style="position:absolute;left: 150px;top: 150px;z-index: 3;">
<img src="iarna.jpg" alt="iarna" width=250 height=200>
</div>
<div style="position:absolute;left: 175px;top: 175px;z-index: 4;">
<img src="toamna.jpg" alt="toamna" width=250 height=200>
</div>
<div style="position: absolute;left: 200px;top: 200px;z-index: 5;">
<img src="toate.jpg" alt="toate anotimpurile" width=250 height=200>
</div>
</body>
</html>
Rezultatul este:
Folosind figurile geometrice din folderul arhivat de mai jos, realizaţi una din imaginile model aflate tot în folderul cu figurile de bază, folosind noţiunile de poziţionare şi rotire a elementelor.
geoanimo.zip