Абсалютнае пазіцыянаванне элементаў у 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;
}

Практычныя задачы

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