Свойство position

Свойство position элементларни позиционлаш усулини белгилайди. Бу свойства кўпинча қуйидаги свойствалар билан бирга ишлатилади top, right, bottom, left, улар юқоридан, ўнгдан, пастдан, чапдан чўзиқни ўрнатишларни белгилайди.

Синтаксис

селектор {
	position: absolute | relative | fixed | static | sticky;
}

position учун қийматлар

Қиймат	Тавсиф
`absolute`	Абсолют позиционлаш. Элемент ҳужжатнинг оддий оқимидан чиқарилади ва yaqin позиционланган ота-онага нисбатан (агар мавжуд бўлса) ёки браузер ойнасига нисбатан позиционланади.
`relative`	Нисбий позиционлаш. Элемент ўзининг оддий ўрнига нисбатан силжитилади ҳужжат оқидида, лекин унинг эгаллаган макони сақланади.
`fixed`	Фиксланган позиционлаш. Элемент ҳужжатнинг оддий оқимидан чиқарилади ва браузер ойнасига нисбатан позиционланади. Саҳифа айлантирилганда ҳам ўрнида қолади.
`static`	Статик позиционлаш. Бу қиймат позиционлаш йўқлигини англатади ва элемент оддий ҳолатда бўлади.
`sticky`	Ёпишқоқ позиционлаш. Элемент `relative` каби тутнумагунча ёки белгиланган позицияга етгунча, шундан сўнг ўша жойга ёпишади (`fixed` каби).

Стандарт қиймат: static.

Мисол . Абсолют позиционлаш

Элементни экраннинг юқори чап бурчагида кичкина чўзиқ билан жойлаштирамиз:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Мисол . Абсолют позиционлаш

Энди элементни экраннинг юқори ўнг бурчагида кичкина чўзиқ билан жойлаштирамиз:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Мисол . Фиксланган позиционлаш

Фиксланган позиционлашда элемент айлантирилганда ҳам ўрнида қолади:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Мисол . Нисбий позиционлаш

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

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

Мисол . Ички joylashuv

Агар ота-онанинг position свойстваси relative қийматига эга бўлса, у ҳолда абсолют позиционланган элементлар ота-онага нисбатан позиционланади:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Мисол . Ички joylashuv

Агар ота-онанинг position свойстваси absolute қийматига эга бўлса, у ҳолда абсолют позиционланган элементлар ота-онага нисбатан позиционланади:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Мисол . Ёпишқоқ позиционлаш

Агар элемент учун position свойстваси sticky қийматига эга бўлса, у ҳолда элемент relative каби тутади, токи белгиланган позицияга етгунча айлантирилганда, шундан сўнг жойга ёпишади. Келинг ёпишқоқ сарлавҳа ясаймиз:

<h1>Asosiy Sayt Sarlavhasi</h1>

<div class="header">sarlavha sarlavha sarlavha</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

Мисол . Позициясиз

Агар элементга абсолют позиционлаш берилса позициясиз кўрсатилганда, элемент ўша жойда туриб қолади, у позиционланмаган жойида турган, лекин бошқа элементлар уни сезмай қолади:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Мисол . Бир ўқ

Абсолют позиционлашда позицияни фақат бир ўқда бериш мумкин. Масалан, агар биз top свойствасини белгиласак, вертикал бўйича элемент керакли позицияга жойлашади, горизонтал бўйича эса туриб қолади, ўша жойда тургандек:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Мисол . Ҳамма позициялар

Абсолют позиционлашда позицияларни ҳамма томондан бериш мумкин, эни ва бўйни бермасдан. Бу ҳолатда элемент жойлашади ота-она блокнинг марказида:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

Шунингдек қаранг

свойство z-index,
у элементларнинг устима-устига қўйилишини белгилайди