Pozitionarea elementelor folosind CSS este mai precisa decat prin intermediul obiectelor grafice HTML sau a tabelelor, afisarea facandu-se mult mai rapid.
Prin intermediul CSS este permisa pozitionarea exacta sau relativa a elementelor intr-o fereastra sau in raport cu alte elemente.
Toatele elementele amplasate in fereastra sunt pozitionate relativ la coltul din stanga-sus.
Cu proprietatea position
se poate specifica pozitia elementului in pagina web.
Un element poate avea una din urmatoarele valori de pozitionare: static, relative, absolute si fixed.
Dupa stabilirea tipului de pozitionare, se poate determina distanta intre punctul de origine si laturile de sus si din stanga ale elementului parinte, folosind proprietatile: top
si left
Forma generala este:
selector { position: valoare; top: valoare; left: valoare; }- La 'top' si 'left', "valoare" poate fi:
<!DOCTYPE html> <html> <head> <title>Title</title> <style> div { border:1px solid #0000d0; position:relative; height:150px; width:250px; } div h3 { margin:0; position:relative; top:25px; left:25px; } </style> </head> <body> <div> <h3>Tutorial css - position</h3> </div> </body> </html>
Pozitionarea in raport cu laturile de jos, respectiv dreapta se poate aplica in cazul pozitionarilor "absolute" sau "fixed". Originea de referinta va fi coltul din dreapta-jos al elementului parinte.
Definirea distantei fata de latura de jos, respectiv din dreapta se face cu proprietatile: bottom
si right
; ele pot lua aceleasi valori ca si "left" si "top", de asemenea pot fi combinate cu acestea.
Forma generala este:
selector { position: absolute | fixed; bottom:valoare; right:valoare; }
<!DOCTYPE html> <html> <head> <title>Title</title> <style> div { border:1px solid #0000d0; position:relative; height:150px; width:250px; } div h3 { margin:0; position:absolute; bottom:25px; right:25px; } </style> </head> <body> <div> <h3>Tutorial css - position</h3> </div> </body> </html>
In cazul in care pentru acelasi element sunt stabilite atat marginile "top / left" cat si "bottom / right", rezultatul afisat depinde de navigator, dar in mod prestabilit se folosesc pozitiile top / left.
In cazul includerii unui element pozitionat absolut intr-un element pozitionat relativ, elementul absolut este pozitionat folosind ca origine coltul din stanga-sus al elementului relativ.
- Iata un exemplu in care o eticheta <div> (cu class="absolut") este inclusa in alta eticheta <div> (cu class="relativ"):
<!DOCTYPE html> <html> <head> <title>Title</title> <style> .relativ { border:1px solid #0000d0; position:relative; height:150px; width:250px; } .absolut { background:#bdbdfb; position:absolute; margin:0; top:30px; left:30px; height:90px; width:150px; } </style> </head> <body> <div class='relativ'> Inainte de Div. <div class='absolut'>Div-ul .absolut</div> Dupa Div. </div> </body> </html>
In cazul in care un element pozitionat relativ este plasat in interiorul unui element pozitionat absolut, acesta se va deplasa o data cu elementul absolut.
Iata un exemplu de cod HTML in care o eticheta <div> (cu class="relativ") este inclusa in alta eticheta <div> (cu class="absolut"):
<!DOCTYPE html> <html> <head> <title>Title</title> <style> .absolut { border:1px solid #0000d0; position:absolute; margin:0; top:40px; left:50px; height:150px; width:250px; } .relativ { background:#bdbdfb; position:relative; height:90px; width:150px; } </style> </head> <body> <div class='absolut'> Div-ul .absolut. <div class='relativ'>Div-ul .relativ</div> </div> </body> </html>
Elementele pot primi o a treia dimensiune, si anume asezarea lor in stiva, unele in raport cu altele.
Amplasarea se face in mod automat, incepand cu valoarea 0 si continuand prin incrementare cu o unitate, in ordinea aparitiei lor in documentul HTML si relativ la elementele parinte.
Pentru pozitionarea elementelor in stiva unele peste altele se foloseste proprietatea z-index
.
Valoarea acestei proprietati aduce elementul in fata sau in sptele altor obiecte HTML din pagina.
Sintaxa generala:
<!DOCTYPE html> <html> <head> <title>Title</title> <style> .parent { border:1px solid #0000d0; position:relative; height:180px; width:280px; } #dv1 { background:#bdbdfb; position:absolute; top:40px; left:50px; height:100px; width:150px; z-index:9999; } #dv2 { background:#ebeb00; height:100px; width:150px; } </style> </head> <body> <div class='parent'> <div id='dv1'>Div-ul #dv1</div> <div id='dv2'>Div-ul #dv2</div> </div> </body> </html>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
a:hover { font-weight: bold; color: #00da01; }
var num = 12.34567; num = num.toFixed(2); alert(num); // 12.35
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES); var_export($arr);
What time is it? It is a quarter to 5. - Cat este ora? E 5 fara un sfert.
¿Qué hora es? Son las tres menos cuarto. - Cat este ora? E 3 fara un sfert.