позиция

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 Смещение не влияет на положение других элементов.

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

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

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

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

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

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

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

• MDN Понимание WCAG, объяснения к пункту 1.4
• Визуальное представление: понимание SC 1.4.8 | Понимание WCAG 2.0

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

position = 
  static       |
  relative     |
  absolute     |
  sticky       |
  fixed        |
  <running()>  

<running()> = 
  running( <custom-ident> )  

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

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 (начального содержащего блока — см. также определение W3C), который является содержащим блоком корневого элемента документа.

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="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;
  top: 30px;
  left: 30px;
}

Результат

Фиксированное позиционирование аналогично абсолютному позиционированию, за исключением того, что содержащим блоком элемента является начальный содержащий блок, установленный визуальным пространством, если у какого-либо предка не установлено свойство transform, perspective, или filter отличное от none (см. Спецификацию CSS Transforms), что затем приводит к тому, что этот предок занимает место содержащего блока элемента. Это можно использовать для создания «плавающего» элемента, который остается в том же положении независимо от прокрутки. В примере ниже, блок «Один» закреплен на 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 позиционирует элемент с id 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: #fff;
  padding: 24px 0 0 0;
}

dt {
  background: #b8c1c8;
  border-bottom: 1px solid #989ea4;
  border-top: 1px solid #717d85;
  color: #fff;
  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: 0 0 0 12px;
  white-space: nowrap;
}

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

Результат

Прилипающее позиционирование со всеми установленными границами смещения

Следующий пример демонстрирует поведение элемента, когда все границы смещения установлены. Здесь у нас две лампочки emoji в абзаце. Лампочки используют прилипающее позиционирование, а границы смещения заданы как 50 пикселей сверху, 100 пикселей справа, 50 пикселей снизу и 50 пикселей слева. Серый фон в родительском элементе div обозначает область смещения.

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

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

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

Результат

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

• Изучение CSS: Размещение