CSS свойство position

CSS свойства

Определение и применение

CSS свойство position указывает какой тип позиционирования используется для элемента (статический, относительный, абсолютный или фиксированный).

Совместно со свойством position используются свойства top, right, bottom и left, которые управляют смещением позиционированного элемента:

смещение позиционированного элемента
  1. position: relative; (элемент с относительным позиционированием) - при использовании свойства left элемент смещается влево или вправо относительно его текущей позиции (отрицательное значение смещает влево, положительное вправо). На примере left: 200px;
  2. position: absolute; (элемент с абсолютным позиционированием) - при использовании свойства left смещается влево или вправо относительно левого края его предка, при этом предок должен иметь значение position отличное от установленного по умолчанию - static, иначе отсчёт будет вестись относительно левого края окна браузера (как при position: fixed;). На примере left: 40px;
  3. position: fixed;(элемент с фиксированным позиционированием) - при использовании свойства left элемент смещается влево или вправо относительно левого края окна браузера. На примере left: 40px;
  4. position: static; (элемент со статическим позиционированием - по умолчанию) - значение свойства left не повлияют на позиционирование элемента.

Более подробную информацию о позиционировании элементов вы можете получить в учебнике CSS в статье "Позиционирование элементов в CSS".

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
position1.01.04.01.07.012.0

CSS синтаксис:

position:"static | absolute | fixed | relative | initial | inherit" ;

JavaScript синтаксис:

object.style.position = "absolute"

Значения свойства

ЗначениеОписание
absoluteАбсолютное позиционирование. При смещении элемент сдвигается относительно заданного края его предка, при этом предок должен иметь значение position отличное от установленного по умолчанию - static, иначе отсчёт будет вестись относительно, указанного края окна браузера (как при position: fixed;).
fixedФиксированное позиционирование. При смещении элемент сдвигается относительно заданного края окна браузера.
staticСтатическое позиционирование. Элементы отображаются в порядке, как они указаны в HTML документе. Это значение по умолчанию.
relativeОтносительное позиционирование. При смещении элемент сдвигается относительно его текущей позиции.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Пример использования свойства position</title>
<style> 
body {
background-color:khaki; /* задаём задний фон цвета хаки */
height:2000px; /* устанавливаем высоту элемента */
}
h1 {
position:static; /* элемент со статическим позиционированием */
}
.relative { 
position:relative; /* элемент с относительным позиционированием */
left : 200px; * задаём смещение элемента влево относительно его текущей позиции */
width 200px; /* задаём ширину блока */
height: 250px; /* задаём высоту блока */
border 5px solid; /* задаём стиль для границ сплошной и ширину 5px */
background-color:orange; /* задаём задний фон оранжевого цвета */
}
.absolute {
position:absolute; /* элемент с абсолютным позиционированием */
left : 40px; * задаём смещение элемента влево относительно левого края его предка */
width 150px; /* задаём ширину блока */
height: 100px; /* задаём высоту блока */
border 5px solid green; /* задаём стиль для границ сплошной, ширину 5px и цвет зелёный */
}
.fixed {
position:fixed; /* элемент с фиксированным позиционированием */
left : 40px; * задаём смещение элемента влево относительно левого края окна браузера */
width 150px; /* задаём ширину блока */
height: 100px; /* задаём высоту блока */
border 5px solid red; /* задаём стиль для границ сплошной, ширину 5px и цвет красный */
}
</style>
</head>
	<body>
		<h1>h1{position:static;}</h1>
		<div class = "relative">div position:relative;</div>
		<div class = "absolute">div position:absolute;</div>
		<div class = "fixed">div position:fixed;</div>
	</body>
</html>

В этом примере использованы все типы позиционирования (статический, относительный, абсолютный и фиксированный. Результат нашего примера:

Пример использования свойства position.
Пример использования свойства position.
CSS свойства