Poziționarea relativă a elementelor în CSS

Poziționarea relativă este setată cu ajutorul valorii relative pentru proprietatea position. Această poziționare permite deplasarea elementelor în raport cu poziția lor curentă cu o anumită valoare. În același timp, toate celelalte elemente ale paginii vor considera că elementul se află acolo unde a fost inițial. Adică, cu acest tip de poziționare, elementul nu iese din fluxul normal.

Deplasările față de poziția curentă sunt setate de proprietățile top, right, bottom și left.

Exemplu

Pentru început, să facem două blocuri fără poziționare:

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

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

Exemplu

Acum să adăugăm primului bloc relative. Nimic nu se va schimba încă, deoarece nu am specificat deplasarea blocului:

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

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

Exemplu

Acum să mutăm blocul nostru cu 30px de sus, dându-i proprietatea top. În același timp, toate celelalte elemente se vor comporta ca și cum blocul nostru ar rămâne în locul unde a fost inițial:

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

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

Exemplu

Să mutăm și blocul nostru cu 40px din stânga, dându-i proprietatea left:

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

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

Exemplu

Valorile negative ale proprietăților top, right, bottom și left deplasează în direcția opusă. De exemplu, o valoare pozitivă a lui top deplasează în jos, iar una negativă - în sus.

Să mutăm al doilea bloc cu 40px în sus, dându-i o valoare negativă a proprietății top:

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

#elem1 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	position: relative;
	top: -40px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Probleme practice

Sunt date următoarele blocuri:

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

#elem1 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #FF8888;
}
#elem2 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #7E89EB;
}
#elem3 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #4DEE99;
}

Deplasați aceste blocuri cu ajutorul poziționării relative în felul următor: