Абсолютне позиціонування елементів на CSS

У цьому уроці ми з вами розберемо абсолютне позиціонування елементів. Воно дозволяє розташовувати елементи за вказаними координатами сторінки. Наприклад, можна розташувати елемент у позицію 100px зверху сторінки та 200px зліва. Елемент переміститься туди, незважаючи на те, що там будуть розташовуватися інші елементи і просто стане поверх них. Говорять, що при цьому елемент випадає з нормального потоку документа: всі інші елементи будуть поводитися так, ніби нашого елемента немає.

Для того, щоб зробити елемент абсолютно спозиціонованим, цьому елементу необхідно задати властивість position в значенні absolute. Крім цієї властивості, потрібні ще дві: одна задаватиме координату по вертикалі, а друга – по горизонталі.

Для вертикалі потрібно задати відступ або зверху, або знизу. Відступ зверху задає властивість top, а відступ знизу - властивість bottom. Для горизонталі потрібно задати відступ або ліворуч, або праворуч. Відступ зліва задає властивість left, а відступ справа - властивість right.

Давайте подивимося на прикладах.

Приклад

Для початку давайте просто зробимо два блоки без позиціонування (зверніть увагу на те, що елементи не притиснуті до краю вікна, тому що body має margin за замовчуванням):

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

Приклад

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

Приклад

Давайте тепер поставимо зелений блок у позицію 0px зверху і 0px зліва:

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

Приклад

Давайте тепер поставимо зелений блок у позицію 0px зверху і 0px справа:

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

Приклад

Давайте тепер поставимо зелений блок у позицію 0px знизу і 0px справа:

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

Приклад

Давайте тепер поставимо зелений блок у позицію 0px знизу і 0px зліва:

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

Практичні задачі

За допомогою абсолютного позиціонування розмістіть блоки наступним чином: