Апсолутно позиционирање елемената у CSS-у

У овом часу ћемо размотрити апсолутно позиционирање елемената. Оно омогућава распоређивање елемената према задатим координатама странице. На пример, могуће је поставити елемент на позицију 100px од врха странице и 200px са леве стране. Елемент ће се померити тамо, без обзира на то шта се тамо налази и просто ће се поставити преко других елемената. Каже се да при томе елемент испада из нормалног тока документа: сви остали елементи ће се понашати као да нашег елемента нема.

Да би елемент био апсолутно позициониран, том елементу је потребно задати својство position са вредношћу absolute. Поред овог својства, потребна су још два: једно ће задати координату по вертикали, а друго - по хоризонтали.

За вертикалну осу потребно је задати одступ или одозго, или одоздо. Одступ одозго задаје својство top, а одступ одоздо - својство bottom. За хоризонталну осу потребно је задати одступ или са леве стране, или са десне стране. Одступ са леве стране задаје својство left, а одступ са десне стране - својство right.

Погледајмо на примерима.

Пример

За почеткa, направимо два блока без позиционирања (обратите пажњу на то да елементи нису приљубљени уз ивицу прозора, јер 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;
}

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

Помоћу апсолутног позиционирања поставите блокове на следећи начин: