Руководство CSS

Правила CSS (RULES)

Полный список свойств CSS

Свойство quotes в CSS Свойство perspective-origin в CSS3

Методы использования и примеры для свойства position CSS

Свойство position CSS определяет, как элемент позиционируется.

В таблице приведены примеры использования и история версий этого свойства, а также синтаксис использования этого свойства в скриптах на JavaScript.

Значение по умолчанию:	static
Применяется к:	Все элементы
Наследование:	Нет
Анимация возможна:	Нет.См. также Свойства анимации.
Версия:	CSS 2, 3
JavaScript грамматика:	объект.style.position="absolute"

Совет:Элементы за position, такие как static, называются размещенными. В вертикальном положении в stacking-среде они определяются свойством z-index.

Использование грамматики position

Грамматика этого свойства такая:

position:　static　|　relative　|　absolute　|　fixed　|　sticky　|　initial　|　inherit

Ниже приведены примеры того, как использовать свойство position.

Пример

　　h1　{
　　　position:　absolute;
　　　top:　100px;
　　　left:　150px;
　　}

Тестировать, посмотреть </>

Примечание: Для типа носителя печати этот блок отображается на каждой странице и фиксирован относительно рамки страницы, даже если страница видна через окно просмотра (например, в случае «предварительного просмотра печати»).

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

В таблице ниже описаны значения этого свойства.

Значение	Описание
static	Коробка этого элемента является нормальной коробкой, которая выстраивается по обычному процессу. Для статических рамок:top,right,bottom,left, иz-indexАтрибут будет проигнорирован. Это значение по умолчанию.
relative	Элемент позиционирован относительно его нормального положения (это называется положением в нормальном потоке).
absolute	Элемент позиционирован относительно первого предка, который не является статическим.
fixed	Этот элемент фиксирован относительно окна просмотра и не двигается при прокрутке. При печати элемент будет напечатан на каждой странице.
sticky	Положение этого элемента подобно рамке, размещенной относительно, и «прикреплено» к ближайшему предку с «системой прокрутки».
initial	Установить этот атрибут в его значение по умолчанию.
inherit	Если задан, то связанный элемент использует значение свойства position родительского элемента.

Совместимость браузеров

Совместимость браузеров с свойством position, числа в таблице представляют собой минимальную версию браузера, поддерживающего это свойство; все основные браузеры поддерживают это свойство.

	Firefox 1+ Google Chrome 1+ Internet Explorer 4+ Apple Safari 1+ Opera 4+

Дополнительное чтение

Узнайте подробнее в следующих руководствах:CSS положение,CSS слой.

Связанные свойства:top,right,bottom,left,z-index.

Свойство quotes в CSS Свойство perspective-origin в CSS3