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

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

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