Уласцівасць 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">
	нейкі доўгі тэкст
</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">
	нейкі доўгі тэкст
</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">
	нейкі доўгі тэкст
</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: 极0px;
	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">
	нейкі доўгі тэкст
</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: 300极;
}

.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,
якое задае накладанне элементаў