CSSда координаталарсиз абсолют позиционирование

Аслинда абсолют позиционированиеда координаталарни кўрсатиш шарт эмас. Агар элементга оддигина position хосисасига absolute қийматни ёзсак, у абсолют позиционирланган бўлади, лекин ўзи турган жойида қолаверади. Бу ҳолда қолган барча элементлар бизнинг элемент йўқдек ҳаракат қилиб, унинг устига чиқиб кетиши мумкин.

Келгила, мисолларда кўрамиз.

Мисол

Аввалогидек, биз учта блок ясаймиз ва уларнинг ўртасига бироз матн қўйамиз:

<div id="elem1"></div>
<div id="elem2"></div>
матн матн матн матн матн матн
<div id="elem3"></div>

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}

Мисол

Энди ёшыл блокга absolute қўшайлик. Натижада бу блок ўз жойида қолади, аммо қолган барча элементлар пастдан бизнинг элемент йўқдек ҳаракат қилиб унинг устига чиқиб кетади:

<div id="elem1"></div>
<div id="elem2"></div>
матн матн матн матн матн матн
<div id="elem3"></div>

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}

Мисол

Энди эса left хосисасини қўшайлик, вертикал позиционированиени қўшмай. Натижада горизонтал йўналишда бизнинг блок кўрсатилган қийматга жойлашади, вертикал йўналишда эса ўз жойида қолаверади:

<div id="elem1"></div>
<div id="elem2"></div>
матн матн матн матн матн матн
<div id="elem3"></div>

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	left: 40px; /* горизонтал йўналишда позиционированиени қўшамиз */
	
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}

Мисол

Энди эса, аксінча, top хосисасини қўшайлик, горизонтал позиционированиени қўшмай. Натижада вертикал йўналишда бизнинг блок кўрсатилган қийматга жойлашади, горизонтал йўналишда эса ўз жойида қолаверади:

<div id="elem1"></div>
<div id="elem2"></div>
матн матн матн матн матн матн
<div id="elem3"></div>

#elem1 {
	width: 200px;
	height: 150px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 100px; /* вертикал йўналишда позиционированиени қўшамиз */
	
	width: 100px;
	height: 100px;
	margin-left: 10px;
	border: 1px solid green;
}
#elem3 {
	width: 50px;
	height: 150px;
	border: 1px solid blue;
}