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.


Proprietatea position

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.

Pozitionarea statica

Valoarea initiala, prestabilita, a pozitionarii elementelor in fereastra este "static".
Cand nu este specificata o pozitionare "relativa", "absoluta" sau "fixa"; elementele sunt dispuse unul dupa altul in interiorul documentului.
Sintaxa:

selector { position:static; }
- Un element static nu poate fi repozitionat in mod explicit.

Pozitionarea relativa

Un element cu pozitionare "relativa" este amplasat la locul sau in cadrul elementului parinte. Apare dupa toate elementele dinaintea sa, respectiv inaintea tuturor elementelor amplasate dupa el.
Sintaxa:
selector { position:relative; }
- Elementele pozitionate relativ pot fi mutate din locatia lor folosind proprietatile "top" si "left" sau "bottom" si "right".

Pozitionarea absoluta

Pozitionarea absoluta are ca efect crearea unui element neafectat de restul documentului, plasarea lui in fereastra fiind facuta intr-o locatie precisa, definita prin intermediul coordonatelor X si Y, indiferent de pozitiile altor elemente.
Sintaxa:
selector { position:absolute; }
- Originea (punctul de coordonate 0,0) este coltul din stanga-sus al obiectului (care are "position: relative") in care este inclus elementul pozitionat absolut.

Pozitionarea fixa

Pozitionarea fixa se face in raport cu fereastra browser-ului, iar la derularea paginii elementul fixat ramane pe pozitia lui initiala, fara a se derula.
Sintaxa:
selector { position:fixed; }

Pozitionarea in raport cu latura de sus, respectiv stanga

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: De asemenea, pot lua si valori negative.

Iata un exemplu in care tag-ul <h3> va fi pozitionat la o distanta de 25 pixeli fata de marginile sus si stanga ale unui DIV parinte:
<!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 latura de jos, respectiv dreapta

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;
}

- Exemplu: tag-ul <h3> va fi pozitionat la o distanta de 25 pixeli fata de marginile de jos si dreapta ale unui DIV parinte:
<!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.


Includerea unui element absolut in unul relativ

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>

Includerea unui element relativ in unul absolut

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>

Pozitionarea in spatiu 3D

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:

selector { z-index:valoare; }
Unde "valoare" este un numar intreg, pozitiv, 0 sau negativ.
In cazul in care continutul elementelor se suprapune, elementul cu numarul de ordine mai mare apare deasupra elementului cu numar mai mic.
Utilizarea unei valori negative determina amplasarea elementului dedesubtul parintelui.

- Exemplu, Div-ul #dv1 e pozitionat absolut si, datorita proprietatii "z-index" apare deasupra Div-ului #dv2 care e dupa el.
<!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>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 adauga o aplicatie externa (SWF, PDF) in pagina web?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Ce pseudo-element adauga un anume stil la prima linie de text din element?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Clic pe proprietatea obiectului window care preia sau seteaza adresa URL a paginii curente.
window.location window.self window.status
var url = window.location;
alert(url);
Indicati functia PHP care preia continutul unui fisier sau pagina si-l adauga intr-un sir.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://www.marplo.net/");
echo $homepage;
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
seven - eight ten - six three - five
This fruit has seven or eight seeds.
- Acest fruct are sapte sau opt seminte.
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
diez - seis siete - ocho tres - cinco
Esta fruta tiene siete u ocho semillas.
- Acest fruct are sapte sau opt seminte.
Pozitionare elemente HTML cu CSS

Last accessed pages

  1. Viitor simplu si continuu - Future Tense Simple and Continuous (12507)
  2. Instructiuni repetitive for si while (989)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (32864)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (6641)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (20696)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2029)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1414)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (997)
  4. Trecutul simplu si continuu - Past Tense Simple and Continuous (980)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (921)