CSS-свойство `position`

Свойство position CSS задаёт способ позиционирования элемента в документе. Физические свойства top, right, bottom и left, а также логические свойства, учитывающие направление потока: inset-block-start, inset-block-end, inset-inline-start и inset-inline-end, можно использовать для определения конечного положения позиционированных элементов.

Попробуйте

position: static;

position: relative;
top: 40px;
left: 40px;

position: absolute;
inset-inline-start: 40px;
inset-block-start: 40px;

position: sticky;
top: 20px;

<section class="default-example" id="default-example">
  <div id="example-element-container">
    <p>
      In this demo you can control the <code>position</code> property for the
      yellow box.
    </p>
    <div class="box"></div>
    <div class="box" id="example-element"></div>
    <div class="box"></div>
    <p class="clear">
      To see the effect of <code>sticky</code> positioning, select the
      <code>position: sticky</code> option and scroll this container.
    </p>
    <p>
      The element will scroll along with its container, until it is at the top
      of the container (or reaches the offset specified in <code>top</code>),
      and will then stop scrolling, so it stays visible.
    </p>
    <p>
      The rest of this text is only supplied to make sure the container
      overflows, so as to enable you to scroll it and see the effect.
    </p>
    <hr />
    <p>
      Far out in the uncharted backwaters of the unfashionable end of the
      western spiral arm of the Galaxy lies a small unregarded yellow sun.
      Orbiting this at a distance of roughly ninety-two million miles is an
      utterly insignificant little blue green planet whose ape-descended life
      forms are so amazingly primitive that they still think digital watches are
      a pretty neat idea.
    </p>
  </div>
</section>

section {
  align-items: flex-start;
  overflow: auto;
}

.box {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  float: left;
  width: 65px;
  height: 65px;
}

.box + .box {
  margin-left: 10px;
}

.clear {
  clear: both;
  padding-top: 1em;
}

#example-element-container {
  position: relative;
  text-align: left;
}

#example-element {
  background-color: yellow;
  border: 3px solid red;
  z-index: 1;
}

Синтаксис

position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* Global values */
position: inherit;
position: initial;
position: revert;
position: revert-layer;
position: unset;

Значения

Свойству задаётся одно из следующих ключевых значений:

static

Положение элемента определяется нормальным потоком документа. Свойства top, right, bottom, left и z-index не оказывают никакого влияния. Это значение по умолчанию.

relative

Положение элемента определяется нормальным потоком документа, а затем смещается относительно его самого в соответствии со значениями top, right, bottom и left. Смещение не влияет на положение других элементов; таким образом, место, выделенное элементу в макете страницы, остаётся таким же, как если бы для position было задано значение static.

Это значение создаёт новый контекст наложения, если значение z-index не равно auto. Его влияние на элементы table-*-group, table-row, table-column, table-cell и table-caption не определено.

absolute

Элемент удаляется из нормального потока документа, и в макете страницы для него не создаётся место. Элемент позиционируется относительно ближайшего предка, для которого задано позиционирование (если таковой имеется), или относительно начального контейнерного блока. Его конечное положение определяется значениями top, right, bottom и left.

Это значение создаёт новый контекст наложения, если значение z-index не равно auto. Отступы абсолютно позиционированных блоков не схлопываются с другими отступами.

fixed

Элемент удаляется из нормального потока документа, и в макете страницы для него не создаётся место. Элемент позиционируется относительно начального контейнерного блока, которым в случае визуальных медиа является область просмотра. Его конечное положение определяется значениями top, right, bottom и left.

Это значение всегда создаёт новый контекст наложения. В печатных документах элемент располагается в одном и том же месте на каждой странице.

sticky

Положение элемента определяется нормальным потоком документа, а затем смещается относительно его ближайшего предка с прокруткой и контейнерного блока (ближайшего предка блочного уровня), включая элементы, связанные с таблицами, в соответствии со значениями top, right, bottom и left. Смещение не влияет на положение других элементов.

Это значение всегда создаёт новый контекст наложения. Обратите внимание: элемент с липким позиционированием «прилипает» к ближайшему предку, у которого есть «механизм прокрутки» (создаваемый, когда overflow имеет значение hidden, scroll, auto или overlay), даже если этот предок не является ближайшим фактически прокручиваемым предком.

Примечание: Для оси, по которой элемент должен быть липким, необходимо задать хотя бы одно свойство inset (top, inset-block-start, right, inset-inline-end и т. д.) со значением, отличным от auto. Если оба свойства inset для оси имеют значение auto, то для этой оси значение sticky будет вести себя как relative.

Описание

Типы позиционирования

• Позиционированный элемент — это элемент, вычисленное значение position которого равно relative, absolute, fixed или sticky. (Иными словами, это любой элемент, кроме static.)
• Элемент с относительным позиционированием — это элемент, вычисленное значение position которого равно relative. Свойства top и bottom задают вертикальное смещение от его обычного положения; свойства left и right задают горизонтальное смещение.
• Элемент с абсолютным позиционированием — это элемент, вычисленное значение position которого равно absolute или fixed. Свойства top, right, bottom и left задают смещения от краёв контейнерного блока элемента. (Контейнерный блок — это предок, относительно которого позиционируется элемент.) Если у элемента есть отступы, они прибавляются к смещению. Элемент создаёт новый контекст форматирования блока (BFC) для своего содержимого.
• Элемент с липким позиционированием — это элемент, вычисленное значение position которого равно sticky. Он рассматривается как элемент с относительным позиционированием, пока его контейнерный блок не пересечёт заданный порог (например, при задании для top значения, отличного от auto) в пределах корня потока (или контейнера, в котором он прокручивается). После этого элемент считается «прилипшим», пока не достигнет противоположного края своего контейнерного блока.

В большинстве случаев для абсолютно позиционированных элементов, у которых для height и width задано значение auto, размер подбирается по содержимому. Однако неперемещаемые абсолютно позиционированные элементы можно растянуть на всю доступную вертикальную область, задав оба свойства top и bottom и не указывая height (то есть задав auto). Аналогично их можно растянуть на всю доступную горизонтальную область, задав оба свойства left и right и оставив width равным auto.

За исключением описанного выше случая, когда абсолютно позиционированные элементы заполняют доступную область:

• Если заданы оба свойства top и bottom (точнее, не auto), приоритет имеет top.
• Если заданы оба свойства left и right, приоритет имеет left, когда direction равно ltr (английский, горизонтальное письмо на японском и т. д.), и right, когда direction равно rtl (персидский, арабский, иврит и т. д.).

Доступность

Убедитесь, что элементы со значением absolute или fixed не перекрывают другое содержимое при увеличении масштаба страницы для повышения читаемости текста.

• MDN: пояснения к руководству WCAG 1.4

• [Визуальное представление: понимание критерия 1.4.8

  Понимание WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)

Производительность и доступность

Прокрутка элементов, содержащих содержимое fixed или sticky, может вызывать проблемы с производительностью и доступностью. При прокрутке браузер должен перерисовывать липкое или фиксированное содержимое в новом месте. В зависимости от содержимого, которое необходимо перерисовать, производительности браузера и скорости обработки устройства браузер может не справляться с перерисовкой со скоростью 60 кадров в секунду. Это может привести к подтормаживанию и, что важнее, создать проблемы с доступностью для людей с повышенной чувствительностью. Одно из решений — добавить will-change: transform к позиционированным элементам, чтобы отрисовывать их на отдельном слое, ускоряя перерисовку и тем самым улучшая производительность и доступность.

Формальное определение

Формальный синтаксис

position = 
  static |
  relative |
  absolute |
  sticky |
  fixed

Примеры

Относительное позиционирование

Элементы с относительным позиционированием смещаются на заданную величину относительно своего обычного положения в документе, но это смещение не влияет на другие элементы. В примере ниже обратите внимание, что другие элементы располагаются так, как если бы «Two» занимал место в своём обычном положении.

HTML

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

CSS

* {
  box-sizing: border-box;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

Абсолютное позиционирование

Элементы с относительным позиционированием остаются в нормальном потоке документа. В отличие от них, абсолютно позиционированный элемент исключается из потока; поэтому другие элементы располагаются так, как если бы его не существовало. Абсолютно позиционированный элемент располагается относительно своего ближайшего позиционированного предка (то есть ближайшего предка, для которого задано значение, отличное от static). Если такого предка нет, элемент позиционируется относительно ICB (начального контейнерного блока), который является контейнерным блоком корневого элемента документа.

HTML

<h1>Absolute positioning</h1>

<p>
  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.
</p>

<p class="positioned">
  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.
</p>

<p>
  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.
</p>

<p>
  inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line as one another, and adjacent text nodes, if there is space on
  the same line. Overflowing inline elements
  <span>wrap onto a new line if possible — like this one containing text</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="https://mdn.github.io/shared-assets/images/examples/long.jpg" />
</p>

CSS

* {
  box-sizing: border-box;
}

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  inset-block-start: 30px;
  inset-inline-start: 30px;
}

Результат

Фиксированное позиционирование

Фиксированное позиционирование похоже на абсолютное, за исключением того, что контейнерным блоком элемента является начальный контейнерный блок, создаваемый областью просмотра, если только у какого-либо предка для свойства transform, perspective или filter не задано значение, отличное от none (см. контейнерный блок для фиксированного позиционирования). В таком случае этот предок становится контейнерным блоком элемента. Это можно использовать для создания «плавающего» элемента, который остаётся в одном месте независимо от прокрутки. В примере ниже блок «One» зафиксирован на расстоянии 80 пикселей от верхнего края страницы и 10 пикселей от левого. Даже после прокрутки он остаётся на том же месте относительно области просмотра. Кроме того, при задании для свойства will-change значения transform создаётся новый контейнерный блок.

HTML

<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <div class="box" id="one">One</div>
</div>

CSS

* {
  box-sizing: border-box;
}

.box {
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#one {
  position: fixed;
  top: 80px;
  left: 10px;
  background: blue;
}

.outer {
  width: 500px;
  height: 300px;
  overflow: scroll;
  padding-left: 150px;
}

Результат

Липкое позиционирование

Следующее правило CSS позиционирует элемент с идентификатором one относительно обычного положения, пока область просмотра не прокрутится так, что элемент окажется на расстоянии 10 пикселей от верхнего края. После достижения этого порога элемент фиксируется на расстоянии 10 пикселей от верхнего края.

#one {
  position: sticky;
  top: 10px;
}

Список с липкими заголовками

Часто липкое позиционирование используют для заголовков в алфавитном списке. Заголовок «B» будет отображаться сразу под элементами, начинающимися на «A», пока они не прокрутятся за пределы экрана. Вместо того чтобы уехать за экран вместе с остальным содержимым, заголовок «B» останется закреплённым у верхнего края области просмотра, пока все элементы на «B» не прокрутятся за пределы экрана. Тогда его перекроет заголовок «C» и так далее.

Чтобы липкое позиционирование работало ожидаемым образом, необходимо задать порог хотя бы для одного из свойств: top, right, bottom или left. В противном случае оно будет неотличимо от относительного позиционирования.

HTML

<dl>
  <div>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </div>
  <div>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </div>
  <div>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </div>
  <div>
    <dt>T</dt>
    <dd>Ted Leo &amp; The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </div>
</dl>

CSS

* {
  box-sizing: border-box;
}

dl > div {
  background: white;
  padding-top: 24px;
}

dt {
  background: #b8c1c8;
  border-bottom: 1px solid #989ea4;
  border-top: 1px solid #717d85;
  color: white;
  font:
    bold 18px/21px "Helvetica",
    "Arial",
    sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font:
    bold 20px/45px "Helvetica",
    "Arial",
    sans-serif;
  margin: 0;
  padding-left: 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #cccccc;
}

Результат

Липкое позиционирование со всеми заданными границами inset

В следующем примере показано поведение элемента, когда заданы все границы inset. В абзаце находятся два эмодзи с изображением лампочек. Для лампочек используется липкое позиционирование, а границы inset заданы на расстоянии 50px сверху и снизу и 100px слева и справа. Серая заливка родительского элемента div обозначает область inset.

HTML

Use scrollbars to put the light bulbs(💡) in the right place in the following
text:
<div>
  <p>
    The representation of an idea by a light bulb(<span class="bulb">💡</span>)
    is a commonly used metaphor that symbolizes the moment of inspiration or the
    birth of a new idea. The association between a light bulb and an idea can be
    traced back to the invention of the incandescent light bulb(<span
      class="bulb"
      >💡</span
    >) by Thomas Edison in the late 19th century. The light bulb is a powerful
    symbol because it represents illumination, clarity, and the sudden
    brightening of one's thoughts or understanding. When someone has an idea, it
    is often described as a light bulb turning on in their mind, signifying a
    moment of insight or creativity. The image of a light bulb also suggests the
    idea of energy, power, and the potential for growth and development.
  </p>
</div>

CSS

div {
  width: 400px;
  height: 200px;
  overflow: scroll;
  scrollbar-width: thin;
  font-size: 16px;
  font-family: "Verdana";
  border: 1px solid;
}

p {
  width: 600px;
  user-select: none;
  margin: 0;
  border: 110px solid transparent;
}

.bulb {
  position: sticky;
  inset: 50px 100px;
}

div {
  /* mark area defined by the inset boundaries using gray color */
  background: linear-gradient(#99999999, #99999999) 100px 50px / 192px 100px
    no-repeat;
}

Результат

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

Спецификации

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

См. также

• Свойства inset
• Изучаем CSS: позиционирование
• Свойства inset для позиционированного макета
• Модули позиционированного макета CSS