Относительное позиционирование элементов в 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;
}

Сместите эти блоки с помощью относительного позиционирования следующим образом: