Својство 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>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,
које задаје наслагивање елемената