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

Во оваа лекција ќе го разгледаме апсолутното позиционирање на елементи. Тоа овозможува позиционирање на елементи по наведените координати на страницата. На пример, може да се позиционира елемент на позиција 100px од горниот раб на страницата и 200px од левиот раб. Елементот ќе се премести таму, без оглед на тоа што таму ќе се наоѓаат други елементи и едноставно ќе се постави над нив. Се вели дека при тоа елементот излегува од нормалниот тек на документот: сите останати елементи ќе се однесуваат како да не постои нашиот елемент.

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

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

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

Пример

За почеток, едноставно да направиме два блока без позиционирање (обрнете внимание на тоа што елементите не се притиснати до рабовите на прозорецот, бидејќи body има margin по default):

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

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

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