Ҷойгиркунии мутлақи элементҳо дар 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;
}

Вазифаҳои амалӣ

Бо ёрии ҷойгиркунии мутлақӣ блокҳоро ба таври зерин ҷойгир кунед: