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.