position

Браузер	Internet Explorer				Chrome				Opera			Safari				Firefox
Версия	6.0	7.0	8.0	9.0	2.0	3.0	4.0	5.0	9.2	9.6	10	2.0	3.1	4.0	5.0	2.0	3.0	3.6	4.0
Поддержка

Краткая информация

CSS	CSS2+
Значение по умолчанию	static
Наследуется	Да
Применяется	Ко всем элементам, за исключением генерируемых
Ссылка на спецификацию	открыть в новой вкладке

Описание

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

Синтаксис

position: absolute | fixed | relative | static | inherit

Аргументы

absolute - Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position у родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

fixed - По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.

relative - Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.

static - Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.

inherit - Наследует значение родителя.

Пример

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">



      <html>

      <head>

      <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

      <title>position</title>

      <style type="text/css">

      .layer1 {

  position: relative;  /*Относительное позиционирование*/

  background:  #f0f0f0;  /*Цвет фона*/

  height: 200px;  /*Высота блока*/

  }

  .layer2 {

  position: absolute;  /*Абсолютное позиционирование*/

  bottom: 15px;  /*Положение от нижнего края*/

  right: 15px;  /*Положение от правого края*/

  line-height: 1px;

  }

  </style>

  </head>

  <body>

   <div class="layer1">

    <div class="layer2">

     <img src="images/girl.jpg" alt="Девочка">

    </div>

   </div>

    </body>

    </html>

Демонстрация примера

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

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

Примечание

Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

position

Категории

Последние комментарии

	Русский
	English