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

Амалий машқлар

Абсолют позициони ёрдамида блокларни қуйидагича жойлаштиринг: