Относително позициониране на елементи в CSS

Относителното позициониране се задава с помощта на стойността relative за свойството position. Такова позициониране позволява елементите да се изместват спрямо текущото си положение с дадена стойност. При това всички останали елементи на страницата ще смятат, че елементът се намира там, където е бил първоначално. Тоест при този тип позициониране елементът не изпада от нормалния поток.

Отместванията от текущата позиция се задават със свойствата top, right, bottom и left.

Пример

За начало нека просто направим два блока без позициониране:

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

Пример

Нека сега добавим relative към първия блок. Това все още няма да промени нищо, тъй като не сме указали отместване на блока:

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

Пример

Нека сега преместим нашия блок с 30px отгоре, като му зададем свойство top. При това всички останали елементи ще се държат така, сякаш нашият блок е останал на мястото, където е бил първоначално:

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

Пример

Нека също преместим нашия блок с 40px отляво, като му зададем свойство 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;
}

Пример

Отрицателните стойности на свойствата top, right, bottom и left преместват в обратна посока. Например, положителна стойност top премества надолу, а отрицателна - нагоре.

Нека преместим нашия втори блок с 40px нагоре, като му зададем отрицателна стойност на свойството 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;
}

Практически задачи

Дадени са следните блокове:

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

Преместете тези блокове с помощта на относително позициониране по следния начин: