| Autor |
Mesaj |
WebMaster
Nas Legendar
Data inscrierii: 07/Ian/2010
Mesaje: 108
|
|
 Poziţionarea obiectelor |
 |
Poziţionarea obiectelor
Poziţionarea permite aşezarea unui obiect într-un anume loc întrebuințând 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), 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 făcut un element liber faţă de celelalte din pagină. Obiectul poate fi orice, de exemplu text sau imagine.
Exemplu: am fixat 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 normală 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 absolut celalalt relativ:
Cod:
<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>
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 folosit două obiecte unul poziţionat absolut celalălt relativ:
Cod:
<html>
<head>
<title>Exemplu 8_3</title>
<style type="text/css">
<!--
.element1 {position: absolute; left: 30px; top: 30px; z-index: 3}
.element2 {position: absolute; left: 50px; top: 50px; z-index: 2}
.element3 {position: absolute; left: 70px; top: 70px; z-index: 1}
-->
</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>
|
|
| 08/01/2010 17:17 |
  |
 |
|
|
Nu puteti crea un subiect nou in acest forum
Nu puteti raspunde in subiectele acestui forum
Nu puteti modifica mesajele proprii din acest forum
Nu puteti sterge mesajele proprii din acest forum
Nu puteti vota in chestionarele din acest forum
|
|
|
