Свойство 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,
которое задает наложение элементов