Pozitionare
Pozitionarea permite asezarea unui obiect intr-un anume loc folosind coordonatele. Totodata obiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt. Atat pozitionarea absoluta (ASOLUTE) cat si cea relativa (RELATIVE) folosesc proprietatile LEFT si TOP exprimate in px (pixeli), in (inci), pt (puncte), ems ( procentaje) sau cm (centimetri).
Pozitionare absoluta plaseaza obiectul in pagina exact in locatia data de left si top. Astfel poate fi creat un element liber fata de celelalte din pagina. Obiectul poate fi orice, de exemplu text sau imagine.
<html>
<head>
<title>Pozitionare</title>
</head>
<body>
<h3 style=”position: absolute; left: 30px; top: 50px”>Textul 1</h3>
<h3 style=”position: absolute; left: 50px; top: 100px”>Textul 2</h3>
</body>
</html>
Pozitionare relativa este pozitia normala pe care o ocupa un element, dupa elementele anterioare si inaintea celor urmatoare. Poate fi deplasat fata de aceasta pozitie folosind proprietatile left si top.
<html>
<head>
<title>Relativa</title>
<style type=”text/css”>
<!–
.absolut {position: absolute; left: 100px; top: 50px;}
.relativ {position: relative; left: 30px; top: 30px;}
–>
</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>
Pozitionarea tridimensionala este pozitionarea pe ecran pe o suprafata bidimensionala si pot fi asezate si unul deasupra celuilalt, intr-o stiva utilizand un indicativ (index-z) incepand cu 0, urmatorul 1 etc. Elementul cu indexul cel mai mare este asezat deasupra.
<html>
<head>
<title>Tridimensional</title>
<style type=”text/css”>
<!–
.poza1 {position: absolute; left: 30px; top: 30px; z-index: 3}
.poza2 {position: absolute; left: 60px; top: 60px; z-index: 2}
.poza3 {position: absolute; left: 80px; top: 80px; z-index: 1}
–>
</style>
</head>
<body>
<div class=”poza1″><img src=”icon1.jpg” mce_src=”icon1.jpg”></div>
<div class=”poza2″><img src=”icon2.jpg” mce_src=”icon2.jpg”></div>
<div class=”poza3″><img src=”icon3.jpg” mce_src=”icon3.jpg”></div>
</body>
</html>
