Свойство CSS position указывает, как элемент позиционируется в документе. top, right, bottom и left определяют конечное местоположение позиционированных элементов. 
 

Этот источник тоже нуждается в переводе, но недоступен.

Описание

Свойство CSS position позволяет выбрать альтернативные правила позиционирования элементов с целью упрощения использования скриптовых анимационных эффектов.

Начальное значениеstatic
Применяется квсе элементы
Наследуетсянет
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой
Создаёт контекст наложенияда

Позиционируемый элемент — это элемент, положение которого задаётся по relative, absolute, fixed, или sticky.
Относительно позиционируемый элемент — только по relative.
Абсолютно позиционируемый элемент — по absolute, или fixed.
Липко позиционируемый элемент (stickily) — по sticky.

Свойства top, right, bottom, и left устанавливают положение позиционируемых элементов.

Синтаксис 

Свойство position указывается как одно ключевое слово, выбранное из списка значений ниже.

/* Keyword values */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;

/* Global values */
position: inherit;
position: initial;
position: unset;

Значения

static
Это значение позволяет элементу находиться в обычном его состоянии, расположенным на своем месте в документе. Свойства top, right, bottom, left и z-index не применяются к данному элементу. Это значение по умолчанию.
relative
Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно себя на основе значений  toprightbottom и left. Смещение не влияет на положение любых других элементов; таким образом, пространство, заданное для элемента в макете страницы, такое же, как если бы позиция была  static
Это значение создает новый  stacking context, когда значение z-index не auto. Его влияние на элементы  table-*-grouptable-rowtable-columntable-cell и table-caption не определено.
absolute
Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создается пробела. Он расположен относительно его ближайшего расположенного предка, если таковой имеется; в противном случае он помещается относительно исходного  containing block. Его конечная позиция определяется значениями  toprightbottom, и left

Это значение создает новый stacking context, когда значение  z-index  не  auto. Поля абсолютно позиционированных коробок не  сворачиваются с другими полями.
fixed
Элемент удаляется из обычного потока документов, и для элемента в макете страницы не создается пробела. Он позиционируется относительно исходного содержащего блока, установленного viewport, за исключением случаев, когда один из его предков имеет свойство transformperspective, или filter, установленное на что-то иное, кроме none (см. CSS Transforms Spec), и в этом случае этот предок ведет себя как содержащий блок.
(Обратите внимание, что существуют несогласованности браузера с  perspective и filter, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями  toprightbottom, and left.  
Это значение всегда создает новый  stacking context. В печатных документах элемент помещается в одно и то же положение на каждой странице.
sticky
Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего прокручивающего предка и содержит containing block (ближайший предка уровня блока), включая элементы, связанные с таблицей, на основе значений  toprightbottom, и left. Смещение не влияет на положение любых других элементов. 
Это значение всегда создает новый  stacking context. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при  overflow от hiddenscrollauto, или overlay), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см.  Github issue on W3C CSSWG).

 

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

  • Позиционируемый элемент - это элемент, вычисляемое значение position которого является либо relativeabsolutefixed, либо sticky.
    (Другими словами, это вce, кроме static.)
  • Относительно позиционируемый элемент является элементом, вычисляемое значение позиции которого является относительным. Свойства top и bottom определяют смещение по вертикали от его нормального положения; свойства left и right задают горизонтальное смещение.
  • Абсолютно позиционируемый элемент - это элемент, чье вычисленное значение position является absolute или fixed. top, right, bottom и left задают смещения из краев содержащего блок элемента.
    (Содержащий блок является предком, относительно которого расположен элемент.) Если элемент имеет поля, они добавляются к смещению.
  • Элемент с липкой позицией - это элемент, значение вычисленного 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 (персидский , Арабский, иврит и т. д.).

 

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

static | relative | absolute | sticky | fixed

Примеры

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

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 {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

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

 

 

Ещё:

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

<h1>Абсолютное позиционирование</h1>
<p>Я базовый элемент уровня блока. Мои соседи сидят на новых строках ниже меня.</p>
<p class="positioned">По умолчанию моя ширина 100% ширины родителя и я достиг такого же высокого уровня, как и весь дочерний контент. Наша общая ширина и высота - это наш контент+заполнение+ширина/высота границы.</p>
<p>Мы отделены нашей маржой. Из-за развала края мы отделены шириной одного из наших полей, а не обоих.</p>
<p>встроенные элементы <span>как этот</span> и <span>вот этот</span> будут сидеть в одной строке друг с другом и соседними текстовыми узлами, если в ней есть место. Переполнение встроенных элементов <span>перейдёт на новую строку, если это возможно, - как содержимое этого текста</span>, или просто перейдёт к новой строке, а если нет, то встанет, как это изображение:<img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
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;
}

 

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

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

В приведенном ниже примере позиционированного предка не существует, и поле три расположено абсолютно относительно непосредственного предка (здесь <body> iframe):

HTML

<div class="box" id="one">один</div>
<div class="box" id="two">два</div>
<div class="box" id="three">три</div>
<div class="box" id="four">четыре</div>

CSS

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

#three { 
   position: absolute; 
   top: 20px; 
   left: 20px;
   background: blue;  
}

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

Фиксированное позиционирование аналогично абсолютному позиционированию, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было  transformperspective, или свойства filter, установленного на нечто иное, чем одно из (см. CSS Transforms Spec), который затем заставляет предка занять место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остается в том же положении независимо от прокрутки. В приведенном ниже примере окно «Один» фиксируется в 80 пикселях от верхней части страницы и 10 пикселей слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.

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>
  <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 {
  background: red;
  width: 100px;
  height: 100px;
  margin: 20px;
  color: white;
}
#one {
  position: fixed;
  top: 80px;
  left: 10px;
}
.outer {
  width: 500px;
  height: 500px;
  overflow: scroll;
  padding-left: 150px;
}

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

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

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

... позиционирует элемент с id одним относительно до тех пор, пока видовой экран не будет прокручен таким образом, чтобы элемент был меньше 10 пикселей от вершины. Помимо этого порога элемент будет зафиксирован на 10 пикселей сверху.

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

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

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

HTML

<div>
  <dl>
    <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>
  </dl>
  <dl>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </dl>
  <dl>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </dl>
  <dl>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </dl>
</div>

CSS

* {
  box-sizing: border-box;
}

dl {
  margin: 0;
  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
}

Доступность

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

Примечания

Для относительно позиционированных элементов верхнее или нижнее свойство задает вертикальное смещение от нормального положения, а свойство left или right определяет горизонтальное смещение.

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

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

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

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

Характеристики

Спецификация Статус Коммент
CSS Level 2 (Revision 1)
Определение 'position' в этой спецификации.
Рекомендация  
CSS Positioned Layout Module Level 3
Определение 'position' в этой спецификации.
Рабочий черновик Добавляет значение свойства sticky 

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1
Замечания
Полная поддержка 1
Замечания
Замечания Before Firefox 57, absolute positioning did not work correctly when applied to elements inside tables that have border-collapse applied to them (bug 1379306).
IE Полная поддержка 4
Замечания
Полная поддержка 4
Замечания
Замечания In Internet Explorer, fixed positioning doesn't work if the document is in quirks mode.
Opera Полная поддержка 4Safari Полная поддержка 1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile Полная поддержка ДаFirefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка Да
fixedChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1
Замечания
Полная поддержка 1
Замечания
Замечания Before Firefox 44, position: fixed didn't create a stacking context in most cases. Firefox and the specification have been modified to mimic Chrome and Safari's long-time behavior.
IE Полная поддержка 7Opera Полная поддержка 4Safari Полная поддержка 1WebView Android Полная поддержка ДаChrome Android Полная поддержка ДаEdge Mobile ? Firefox Android ? Opera Android Полная поддержка ДаSafari iOS ? Samsung Internet Android Полная поддержка Да
stickyChrome Полная поддержка 56Edge Полная поддержка 16Firefox Полная поддержка 32
Полная поддержка 32
Нет поддержки 26 — 48
Отключено
Отключено From version 26 until version 48 (exclusive): this feature is behind the layout.css.sticky.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Нет поддержки НетOpera Полная поддержка 43Safari Полная поддержка 6.1
С префиксом
Полная поддержка 6.1
С префиксом
С префиксом Требует вендорный префикс: -webkit-
WebView Android Полная поддержка 56Chrome Android Полная поддержка 56Edge Mobile Полная поддержка 16Firefox Android ? Opera Android Полная поддержка 43Safari iOS ? Samsung Internet Android Полная поддержка 6.0
Table elements as absolute positioning containersChrome ? Edge ? Firefox Полная поддержка 30
Замечания
Полная поддержка 30
Замечания
Замечания Firefox helps developers transition to the new behavior and detect any rendering issues it may cause on their sites by printing the following warning to the JavaScript console: "Absolute positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect."
IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Полная поддержка 30
Замечания
Полная поддержка 30
Замечания
Замечания Firefox helps developers transition to the new behavior and detect any rendering issues it may cause on their sites by printing the following warning to the JavaScript console: "Absolute positioning of table rows and row groups is now supported. This site may need to be updated because it may depend on this feature having no effect."
Opera Android ? Safari iOS ? Samsung Internet Android ?
Table elements as sticky positioning containersChrome Нет поддержки НетEdge ? Firefox Полная поддержка 59IE ? Opera Нет поддержки НетSafari ? WebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile ? Firefox Android Полная поддержка 59Opera Android Нет поддержки НетSafari iOS ? Samsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна
Смотрите замечания реализации.
Смотрите замечания реализации.
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

Метки документа и участники

Внесли вклад в эту страницу: snilcy, warsan, fscholz, Koshunch, meowow, bilazik
Обновлялась последний раз: snilcy,