Својството 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, сè додека не достигне зададена позиција при лизгање, по што се залепува за местото. Ајде да направиме леплив header:

<h1>Main Site Header</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,
кое го задава преклопувањето на елементите