Poziționarea absolută a elementelor în CSS

În această lecție vom analiza poziționarea absolută a elementelor. Aceasta permite plasarea elementelor după coordonatele specificate ale paginii. De exemplu, puteți plasa un element în poziția 100px de susul paginii și 200px din stânga. Elementul se va muta acolo, indiferent de ce alte elemente se vor afla în acel loc și va apărea deasupra lor. Se spune că în acest caz elementul iese din fluxul normal al documentului: toate celelalte elemente se vor comporta ca și cum elementul nostru nu ar exista.

Pentru a face un element poziționat absolut, acestui element trebuie să i se atribuie proprietatea position cu valoarea absolute. Pe lângă această proprietate, sunt necesare încă două: una va seta coordonata pe verticală, iar cealaltă - pe orizontală.

Pentru verticală trebuie setat un offset fie de sus, fie de jos. Offset-ul de sus este setat de proprietatea top, iar offset-ul de jos - de proprietatea bottom. Pentru orizontală trebuie setat un offset fie din stânga, fie din dreapta. Offset-ul din stânga este setat de proprietatea left, iar offset-ul din dreapta - de proprietatea right.

Să ne uităm la exemple.

Exemplu

Pentru început, să facem două blocuri fără poziționare (atenție la faptul că elementele nu sunt lipite de marginea ferestrei, deoarece body are margin implicit):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Exemplu

Acum să dăm blocului verde poziționare absolută, plasându-l în poziția de sus 150px și din stânga 100px:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Exemplu

Acum să plasăm blocul verde în poziția 0px de sus și 0px din stânga:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Exemplu

Acum să plasăm blocul verde în poziția 0px de sus și 0px din dreapta:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Exemplu

Acum să plasăm blocul verde în poziția 0px de jos și 0px din dreapta:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Exemplu

Acum să plasăm blocul verde în poziția 0px de jos și 0px din stânga:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Probleme practice

Folosind poziționarea absolută, plasați blocurile în felul următor: