Свойство position стиля

Определение и использование

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

Дополнительная литература:

CSS учебник:CSS позиционирование

CSS справочник по стилям:Свойство position

Пример

Пример 1

Изменить позиционирование элемента <div> с относительного на абсолютное:

document.getElementById("myDIV").style.position = "absolute";

Попробуйте сами

Пример 2

Использование различных типов позиционирования:

function myFunction(x)  {
  var whichSelected = x.selectedIndex;
  var posVal = x.options[whichSelected].text;
  var elem = document.getElementById("myDiv");
  elem.style.position = posVal;
}

Попробуйте сами

Пример 3

Возврат позиции элемента <h2>:

alert(document.getElementById("myH2").style.position);

Попробуйте сами

Грамматика

Возврат положения свойства:

object.style.position

Установить положение свойства:

object.style.position = "static|absolute|fixed|relative|sticky|initial|inherit"

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

Значение Описание
static Элементы представляются в порядке их появления в документе. По умолчанию.
absolute Элемент позиционируется относительно первого позиционированного (не статического) предка.
fixed Элемент позиционируется относительно окна браузера.
relative

Элемент позиционируется относительно его обычного положения.

Таким образом, «left:20» увеличивает левую позицию элемента на 20 пикселей.
sticky

Элементы позиционируются в зависимости от положения скролла пользователя.

Стicky элементы переключаются между relative и fixed в зависимости от положения скролла.

Это относительное позиционирование, до тех пор, пока в viewport не встретится заданное смещение - затем оно «прилипает» к соответствующей позиции (например, position:fixed).

Комментарий:Not supported in IE/Edge 15 or earlier versions. Safari supports the Webkit prefix from version 6.1.
initial Set this property to its default value. See initial.
inherit Инherit this property from its parent element. See inherit.

Технические детали

по умолчанию: static
возвратное значение: строка, представляющая тип позиционирования элемента.
CSS версия: CSS2

Поддержка браузеров

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Поддержка Поддержка Поддержка Поддержка Поддержка