css-position

  • 08.07.2026
  • admin
  • 1минут читать

<position>

CSS CSS2
Значение по умолчанию static
Наследуется Да
Применяется Ко всем элементам, за исключением генерируемых
Аналог HTML Нет
Ссылка на спецификацию https://www.w3.org/TR/CSS21/visuren.php#propdef-position

Описание

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

Синтаксис

position: absolute | fixed | relative | static

Аргументы

absolute
Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.
fixed
По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы. Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает данный аргумент.
relative
Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.
static
Элементы отображаются как обычно. Использование параметров left, top, right и bottom не приводит к каким-либо результатам.

Пример

Валидный CSS<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>position</title>
<body>

<div style="font-family: Times, serif; font-size: 200%">
T<span style="position: relative; top: 10px">E</span>X и L<span style="position: relative; top: -5px; font-size: 80%">A</span>T<span style="position: relative; top: 10px">E</span>X
</div>

</body>
</html>

Объектная модель

[window.]document.getElementById("elementID").style.position

Примечание

Браузер Internet Explorer 7 поддерживает значение position: fixed только в «строгом» режиме (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">).

Позиционирование

  • bottom устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).
  • left определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента. Отсчет координат зависит от значения параметра position.
  • position устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
  • right элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента.
  • top определяет расстояние от верхнего края родительского элемента, не включая отступ, поле и ширину рамки, до верхнего края дочернего элемента.
  • z-index управляет размещением элементов по z-оси, что позволяет накладывать элементы друг на друга.