Свойство position

Свойство position элементдердин позициялоо ыкмасын белгилейт. Бул касиет көбүнчө жогорудан, оңдон, төмөндөн, солдон тиешелүү четтөөлөрдү белгилөөчү top, right, bottom, left касиеттери менен бирге колдонулат.

Синтаксис

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

Position үчүн маанилер

Маани	Сүрөттөмө
`absolute`	Абсолюттук позициялоо. Элемент документтин кадимки агымынан алынып салынат жана жакынкы позицияланган ата-бабасына (бар болсо) же браузердин терезесине карата позицияланат.
`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;
}

Мисал . Ичиндегилик

Эгерде ата-энесинин 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;
}

Мисал . Ичиндегилик

Эгерде ата-энесинин 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>Негизги Сайттын Баш Кийими</h1>

<div class="header">header header header</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 касиети,
ал элементтердин үстүнө үстүнө түшүүсүн белгилейт