Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

position

Свойство CSS position используется для указания способа позиционирования HTML-элемента на странице. Само изменение позиции элемента осуществляется с помощью свойств top, right, bottom и left.

Тип свойства

Назначение: позиционирование.

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значением свойства CSS position является одно из ключевых слов задающих способ позиционирования.

Как вы знаете, обычным втроенным (inline) элементам нельзя явно задать высоту (CSS width) или ширину (CSS height). Однако, если к встроенному элементу применяется позиционирование со значением absolute или fixed, то размеры у него становятся изменяемые. Помните об этой особенности, часто она очень помогает.

Процентная запись: не существует.

Значение по умолчанию: static.

HTML-элементы называются предками для тех тегов, которые находятся внутри них на любом уровне вложенности, а родительскими для тех, которые находятся внутри них на первом уровне. Естественно предки являются одновременно и родительскими элементами для своих потомков первого уровня вложенности (дочерних).

Естественно при позиционировании вовсе не обязательно использовать свойства CSS top, right, bottom или left, чтобы изменить положение элемента. Да, при относительном позиционировании это не даст особого эффекта — элемент будет вырван из прямого потока, но его место все-равно никто не сможет занять. А вот при абсолютном, элемент будет не только «вырван» из контекста HTML-страницы, но и нижестоящие элементы займут его место. Причем при position: fixed он еще и будет оставаться на одном месте при скроллинге.

На изображениях ниже показано четыре элемента на странице, один родитель и три его дочерних, и варианты позиционирования одного из дочерних элементов относительно родительского (абсолютное) и относительно своего первоначального места (относительное).

Обычное расположение элементов

Обычное расположение элементов
Относительное позиционирование Абсолютное позиционирование
Относительное позиционирование Абсолютное позиционирование

Синтаксис

position: static | relative | absolute | fixed | inherit

Пример CSS: использование position

<!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=utf-8">
  <title>seodon.ru - CSS свойство position</title>
  <style type="text/css">
   .div1 {
    width: 100%; /* ширина блока DIV1 */
    height: 4000px; /* его высота */
    background: red; /* красный фон */
   }
   .div2 {
    width: 200px; /* ширина блока DIV2 */
    color: white; /* цвет текста */
    background: green; /* зеленый фон */
    position: fixed; /* фиксированная позиция */
    top: 50px; /* смещение вниз от верхней стороны окна */
    left: 100px; /* смещение вправо от левой стороны окна */
   }
   .div3 {
    width: 200px; /* ширина блока DIV3 */
    background: yellow; /* желтый фон */
    position: fixed; /* фиксированная позиция */
    top: 20500px; /* смещение вниз от верхней стороны окна */
   }
   .div4 {
    width: 200px; /* ширина блока DIV4 */
    color: white; /* цвет текста */
    background: blue; /* синий фон */
   }
  </style>
 </head>
 <body>
  <div class="div1">
    <div class="div2">
     Этот блок DIV2 абсолютно позиционирован относительно
     окна браузера и будет зафиксирован при скроллинге.
    </div>
    <div class="div3">
     Этот DIV3 тоже зафиксирован, но вы его вообще
     не увидите, так как задано очень большое смещение
     и он будет всегда находиться в 20500px от верха окна.
    </div>
    <div class="div4">
     Обычный блок DIV4.
    </div> 
  </div>
 </body>
</html>

Результат примера

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ЧастичноДаДаДаДаДа

Internet Explorer 6.0 и 7.0 не понимают значение inherit, IE 6.0 еще не понимает и fixed.