CSS-свойство position

CSS-свойство position управляет тем, как элемент размещается в документе и как он реагирует на свойства смещения top, right, bottom и left. Это одно из важнейших свойств для создания многоуровневых, фиксированных или плавающих элементов интерфейса.

Свойство принимает пять основных значений:

static — значение по умолчанию; элемент остаётся в обычном потоке документа.
relative — элемент сохраняет своё место в потоке, но может быть смещён с помощью свойств смещения.
absolute — элемент извлекается из потока и позиционируется относительно ближайшего позиционированного предка.
fixed — элемент извлекается из потока и позиционируется относительно viewport.
sticky — элемент переключается между relative и fixed при прокрутке.

На этой странице объясняется, когда следует использовать каждое из значений, правила работы смещений и содержащих блоков, а также распространённые ошибки, с которыми сталкиваются разработчики.

Как работают смещения и содержащие блоки

Свойства смещения top, right, bottom и left действуют только на позиционированные элементы — то есть на те, у которых position отличается от static. Для static-элементов они игнорируются.

То, от чего отсчитывается каждое смещение, зависит от значения:

relative — смещения отсчитываются от собственной нормальной позиции элемента. top и bottom перемещают его по вертикали; left и right — по горизонтали. Место, которое элемент занимал изначально, сохраняется, поэтому окружающий контент не сдвигается.
absolute — смещения отсчитываются от краёв содержащего блока: ближайшего предка, который сам является позиционированным (relative, absolute, fixed или sticky). Если такого предка нет, смещения отсчитываются от начального содержащего блока (примерно элемент <html> / страница).
fixed — смещения отсчитываются от viewport, поэтому элемент остаётся на месте при прокрутке страницы.
sticky — смещения задают порог; элемент ведёт себя как relative, пока вы не прокрутите страницу до этого порога, после чего фиксируется как fixed в пределах прокручиваемого контейнера.

Распространённая ошибка — ожидать, что дочерний элемент с absolute выровняется относительно родителя без установки position: relative (или любого непустого значения position) на этом родителе. Добавление position: relative к родителю — даже без смещений — делает его содержащим блоком. Этот паттерн «relative-родитель, absolute-дочерний» лежит в основе большинства позиционированных макетов.

Initial Value	static
Applies to	All elements.
Inherited	No.
Animatable	No.
Version	CSS2
DOM Syntax	Object.style.position = "sticky";

Синтаксис

Синтаксис CSS position

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

Простой пример с absolute

Здесь position: absolute извлекает абзац из потока и размещает его в 40px от левого и 120px от верхнего края страницы (позиционированного предка нет, поэтому страница является точкой отсчёта):

Пример кода CSS position

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        position: absolute;
        left: 40px;
        top: 120px;
      }
    </style>
  </head>
  <body>
    <h2>Position property example</h2>
    <p>Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </body>
</html>

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

Результат

Пример свойства position со всеми значениями:

Пример CSS position со всеми значениями

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #box1 {
        position: static;
        border: 2px solid #666;
        width: 300px;
        height: 100px;
      }
      #box2 {
        position: absolute;
        border: 2px solid #8ebf42;
        top: 70px;
        right: 15px;
      }
      #box3 {
        position: relative;
        border: 2px solid #666;
        width: 300px;
        height: 100px;
      }
      #box4 {
        position: absolute;
        border: 2px solid #8ebf42;
        top: 70px;
        right: 15px;
      }
      #box5 {
        position: absolute;
        border: 2px solid #666;
        width: 320px;
        height: 100px;
        top: 750px;
        right: 25px;
      }
      #box6 {
        position: absolute;
        border: 2px solid #8ebf42;
        top: 70px;
        right: 15px;
      }
      #box7 {
        position: fixed;
        border: 2px solid #8ebf42;
        background-color: #eee;
        width: 300px;
        height: 100px;
        bottom: 0;
        left: 0;
        right: 0;
      }
      #box8 {
        position: absolute;
        border: 2px solid #666;
        top: 70px;
        right: 15px;
      }
    </style>
  </head>
  <body>
    <h2>Position property example</h2>
    <h3>Position: static</h3>
    <p>
      The Box1 element remains in the natural flow of the page and does not act as anchor point for the absolutely positioned Box2 element:
    </p>
    <div id="box1">
      Box1: position: static.
      <div id="box2">Box2: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: relative</h3>
    <p>
      The Box3 element remains in the natural flow of the page and also acts as anchor point for the absolutely positioned Box4 element:
    </p>
    <div id="box3">
      Box3: position: relative.
      <div id="box4">Box4: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: absolute</h3>
    <p>
      The Box5 element does not remain in the natural flow of the page. It positions itself according to the closest positioned ancestor and also acts as anchor point for the absolutely positioned Box6 element:
    </p>
    <div id="box5">
      Box5: position: absolute, top: 750px, right: 15px.
      <div id="box6">Box6: position: absolute, right: 15px, top: 70px</div>
    </div>
    <h3>Position: fixed</h3>
    <p>
      The Box7 element does not remain in the natural flow of the page and positions itself according to the viewport and acts as anchor point for the absolutely positioned Box8 element:
    </p>
    <div id="box7">
      Box7: position: fixed, bottom: 0, left: 0, right: 0.
      <div id="box8">Box8: position: absolute, right: 15px, top: 70px</div>
    </div>
  </body>
</html>

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

В этом примере box1 (static) и box3 (relative) остаются в нормальном потоке, однако только box3 является содержащим блоком для своего дочернего абсолютно позиционированного элемента, потому что relative делает его позиционированным предком, а static — нет. box5 и box7 извлекаются из потока и позиционируются относительно страницы и viewport соответственно.

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

Элемент с sticky прокручивается в обычном режиме, пока не достигнет указанного вами смещения (здесь top: 1px), после чего «прилипает» на месте внутри прокручиваемого контейнера. Это идеально подходит для заголовков таблиц, меток разделов и панелей инструментов, которые должны оставаться видимыми, пока соответствующий раздел находится на экране. Обратите внимание: sticky-позиционирование работает только тогда, когда прокручивается прокручиваемый предок элемента, и этот предок не должен иметь overflow: hidden, которое обрезало бы элемент.

Пример свойства position со значением "sticky":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        height: 150px;
        overflow: auto;
        position: relative;
        background-color: #cccccc;
        padding: 0;
      }
      ul li {
        list-style-type: none;
        height: 30px;
        padding: 10px 10px 0;
      }
      ul li:first-child {
        position: -webkit-sticky;
        position: sticky;
        top: 1px;
        background-color: #dddddd;
      }
    </style>
  </head>
  <body>
    <h2>Example of the position property with the "sticky" value:</h2>
    <ul>
      <li>Sticky List Item</li>
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
      <li>List Item 4</li>
      <li>List Item 5</li>
      <li>List Item 6</li>
      <li>List Item 7</li>
      <li>List Item 8</li>
      <li>List Item 9</li>
    </ul>
  </body>
</html>

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

Значения

Значение	Описание	Попробуйте
static	Элементы размещаются в соответствии с нормальным потоком документа. Это значение по умолчанию.	Попробуйте »
absolute	Элементы извлекаются из потока документа и позиционируются относительно позиционированного элемента-предка.	Попробуйте »
fixed	Элементы извлекаются из потока документа и позиционируются относительно окна браузера.	Попробуйте »
relative	Элемент размещается относительно своей нормальной позиции; свойства смещения сдвигают его без удаления из исходного пространства.	Попробуйте »
sticky	Элементы позиционируются в соответствии с нормальным потоком документа, а затем смещаются относительно ближайшего прокручиваемого предка и содержащего блока.
initial	Устанавливает для свойства значение по умолчанию.	Попробуйте »
inherit	Наследует значение свойства от родительского элемента.

Когда использовать то или иное значение

static — оставьте его для обычного содержимого документа. Явно задавать static нужно редко — лишь чтобы сбросить правило позиционирования.
relative — для незначительного визуального смещения или, чаще всего, чтобы превратить элемент в содержащий блок для дочернего элемента с absolute, не удаляя его из потока.
absolute — для оверлеев, бейджей, тултипов и выпадающих меню, которые должны быть точно размещены внутри relative-родителя.
fixed — для элементов, прикреплённых к viewport: «прилипающих» заголовков, кнопок «наверх», баннеров с cookies и модальных окон.
sticky — для заголовков или меток, которые должны прокручиваться вместе с контентом до определённого момента, а затем оставаться видимыми.

Когда позиционированные элементы перекрываются, их порядок по глубине управляется свойством z-index. Позиционирование также часто сочетается с float, display и overflow при построении макетов.

Практика

Какие типы позиционирования существуют в CSS?