Свойство position

Содержание:

CSS Tutorial
Абсолютное позиционирование
Центрирование по вертикали в CSS уровня 3
Что такое относительное позиционирование CSS?
- CSS
Создание многократно используемых макетов
Как использовать Flexbox
- Как располагать элементы при помощи Flexbox
- Как выравнивать элементы по центру экрана
Относительное позиционирование
У абсолютно позиционированных элементов поля не объединяются
Основной поток документа
CSS position
Абсолютно позиционированные строчные элементы становятся блочными
Фиксированное позиционирование
«Position relative» – зачем вообще это нужно?
Абсолютное позиционирование: absolute
Виды позиционирования
Значения
Итого

CSS Tutorial

CSS HOMECSS IntroductionCSS SyntaxCSS SelectorsCSS How ToCSS CommentsCSS Colors
Colors
RGB
HEX
HSL

CSS Backgrounds
Background Color
Background Image
Background Repeat
Background Attachment
Background Shorthand

CSS Borders
Borders
Border Width
Border Color
Border Sides
Border Shorthand
Rounded Borders

CSS Margins
Margins
Margin Collapse

CSS PaddingCSS Height/WidthCSS Box ModelCSS Outline
Outline
Outline Width
Outline Color
Outline Shorthand
Outline Offset

CSS Text
Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

CSS Fonts
Font Family
Font Web Safe
Font Fallbacks
Font Style
Font Size
Font Google
Font Pairings
Font Shorthand

CSS IconsCSS LinksCSS ListsCSS Tables
Table Borders
Table Size
Table Alignment
Table Style
Table Responsive

CSS DisplayCSS Max-widthCSS PositionCSS OverflowCSS Float
Float
Clear
Float Examples

CSS Inline-blockCSS AlignCSS CombinatorsCSS Pseudo-classCSS Pseudo-elementCSS OpacityCSS Navigation Bar
Navbar
Vertical Navbar
Horizontal Navbar

CSS DropdownsCSS Image GalleryCSS Image SpritesCSS Attr SelectorsCSS FormsCSS CountersCSS Website LayoutCSS UnitsCSS SpecificityCSS !important

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

Position

Элементы с абсолютным позиционированием полностью удаляются из общего потока, остальные элементы будут занимать освободившееся пространство, полностью игнорируя абсолютно позиционированные элементы. Затем можно позиционировать элемент в любое нужное место веб-страницы, используя свойства , , или .

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      img {
        position: absolute;
        right: 0px;
        top: 0px;
      }
    </style>
  </head>

  <body>
	<img src="image.jpg">
	<p>Изменим расположение логотипа с помощью абсолютного позиционирования.<br> 
      Теперь логотип будет располагаться в правом верхнем углу страницы.</p>
  </body>
</html>

Попробовать »

Центрирование по вертикали в CSS уровня 3

Css свойство overflow

Уровень 3 CSS предлагает и другие возможности. На момент
написания этой статьи (2014 год), хороший способ вертикального
выравнивания блока без использования абсолютного позиционирования
(что может приводить к частичному перекрытию текста) всё ещё
обсуждается. Но если вам известно, что частичное перекрытие текста
не станет проблемой в вашем документе, вы можете использовать
свойство ‘transform’, чтобы выровнять по центру абсолютно
позиционированный элемент. Например:

Этот абзац выровнен вертикально по центру.

Для документа, который выглядит вот так:

<div class=container3>
  <p>Этот абзац…
</div>

таблица стилей выглядит так:

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

Основные правила:

Сделайте контейнер относительно позиционированным
(position: relative), что превратит его в контейнер для абсолютно
позиционированных элементов.
Сам элемент сделайте абсолютно позиционированным
(position: absolute).
Поместите элемент посередине контейнера с помощью ‘top: 50%’.
(Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)
Используйте translate, чтобы переместить элемент вверх на
половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’
указывают на высоту самого элемента.)

Недавно (начиная приблизительно с 2015-го года) в нескольких
реализациях CSS стала доступна новая техника. Она основана на новом
ключевом слове ‘flex’ для свойства ‘display’. Это ключевое слово
предназначено для использования в графическом интерфейсе
пользователя (GUI), но ничто не мешает вам использовать его в
документе, если у этого документа правильная структура.

Этот абзац выровнен по центру вертикально.

таблица стилей выглядит следующим образом:

Что такое относительное позиционирование CSS?

Свойство css text-align

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

position: relative; ограничивает область действия абсолютно позиционированных дочерних элементов. То есть, они могут быть абсолютно позиционированы только в пределах этого блока.

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

CSS

#first_element { 
  position: relative; 
  left: 30px; 
  top: 70px; 
  width: 500px; 
  background-color: #fafafa; 
  border: solid 3px #ff7347; 
  font-size: 24px; 
  text-align: center; 
} 
#second_element { 
  position: relative; 
  width: 500px; 
  background-color: #fafafa; 
  border: solid 3px #ff7347; 
  font-size: 24px; 
  text-align: center; 
}

Создание многократно используемых макетов

При создании сайта всегда лучше написать модульные стили, которые могут быть повторно задействованы в других местах, а многократно используемые макеты находятся в верхней части списка повторно применяемого кода. Макеты могут быть созданы с помощью float или строчно-блочных элементов, но что работает лучше и почему?

Вопрос что лучше для структуры страницы — обтекаемые или строчно-блочные элементы открыт для обсуждения. Мой подход заключается в использовании строчно-блочных элементов для создания сетки или макета страницы, а затем задействовать float, когда мне хочется чтобы контент обтекал вокруг данного элемента (для чего float и были предназначены при работе с изображениями). Вообще, я также считаю, что со строчно-блочными элементами легче работать.

Тем не менее, используйте то, что работает лучше для вас. Если с одним подходом вы знакомы лучше чем с другим, тогда задействуйте его.

В настоящее время в работе появились новые спецификации CSS — в частности, свойства flex- и grid-, которые помогут решить, как лучше всего сверстать страницы. Следите за этими методами, когда они начнут всплывать.

Как использовать Flexbox

(О выборе между Grid и Flexbox можно почитать в статье «Grid — для макетов, Flexbox — для компонентов», — прим. ред. Techrocks).

Допустим, у нас есть документ, в котором по порядку идут три одинаковых элемента-потомка какого-нибудь родительского блока. Они располагаются друг за другом вертикально.

Но что, если нам нужно расположить их в ряд?

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

Для начала давайте создадим родительский блок с тремя элементами-потомками внутри него.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Position and Flexbox</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="parent">
        <div class="child-one"></div>
        <div class="child-two"></div>
        <div class="child-three"></div>
    </div>
</body>
</html>

CSS:

/* Flexbox container */
.parent {
    background-color: #00AAFF;
    width: 300px;
    height: 300px;
    display: flex;
  }

  .child-one {
    background-color: rgb(116, 255, 116);
    width: 300px;
    height: 300px;
  }
  
  .child-two {
    background-color: rgb(248, 117, 117);
    width: 300px;
    height: 300px;
  }
  
  .child-three {
    background-color: rgb(255, 116, 232);
    width: 300px;
    height: 300px;
  }

Обратите внимание, что для класса установлено свойство. Благодаря этому наши элементы-потомки расположились в ряд

Это расположение, принятое во Flexbox по умолчанию.

Давайте посмотрим другие варианты расположений.

Как располагать элементы при помощи Flexbox

flex-direction

Свойство служит для указания главной оси, по которой будут располагаться элементы. То есть, оно определяет, как элементы будут отображаться на экране: горизонтально или вертикально.

Свойству назначают значение row, если элементы нужно расположить в ряд, слева направо (это значение по умолчанию):

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

Значение работает так же, как , но порядок элементов будет обратным. Первый элемент станет последним, а последний — первым. расположение элементов будет противоположным тому, что было бы при значении :

Аналогично, значение служит для расположения элементов вертикально, но в обратном порядке.

justify-content

Это свойство определяет выравнивание элементов вдоль горизонтальной оси контейнера.

Если задано значение , элементы будут располагаться по центру контейнера.

При значении — в начале страницы.

При значении — в конце страницы.

Значение позволяет распределить элементы по ширине flex-блока. Элементы будут разделены промежутками. Расстояния между каждой парой соседних элементов будут одинаковыми, а пустые пространства перед первым элементом и после последнего элемента будут равны половине пространства между парами элементов.

Вы видите, что пространства между , и одинаковые, а пространства перед и после — меньше.

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

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

align-items

Свойство аналогично свойству , но служит для выравнивания элементов по вертикали. Работает только с фиксированной высотой контейнера.

Значение позволяет центрировать элементы по вертикали.

При значении элементы выравниваются по верхнему краю страницы.

При значении — выравниваются по нижнему краю.

Теперь вы знаете основы Flexbox.

Как выравнивать элементы по центру экрана

Свойства Flexbox можно использовать вместе. Например, если мы хотим расположить элементы по центру и по горизонтали, и по вертикали, мы можем задать и , и .

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

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      h2 {
		position: relative;
		top: 30px;
	  }
    </style>
  </head>

  <body>
    <h1>Заголовок первого уровня.</h1>
	<h2>Относительно позиционированный заголовок.</h2>
	<h3>Заголовок третьего уровня.</h3>
  </body>
</html>

Попробовать »

Примечание: элементы с относительным позиционированием () обычно используют в качестве родителя для элементов с абсолютным позиционированием ().

У абсолютно позиционированных элементов поля не объединяются

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

Поля абсолютно позиционированных элементов не объединяются ни с какими другими полями.

Рассмотрим следующий пример:

В этой демо-версии элемент изначально имеет поля 20px. Кроме этого его верхнее поле объединяется с верхним полем родительского элемента, которое также равно 20px. Как видите, верхнее поле не объединяется с соответствующим полем родительского элемента только тогда, когда мы позиционируем элемент абсолютно, а не CSS position relative top left.

Чтобы предотвратить объединение полей, нужен небольшой отступ или рамка. Мы должны применить это правило к родительскому или дочернему элементу. Другой вариант — добавить класс clearfix (в нашем примере) для родительского элемента.

Основной поток документа

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

Элементы, которые подчиняются этим приавилам, находятся в основном
потоке документа. Этот термин возник потому, что существуют элементы, которые размещаются на странице
совсем по-другому. Для этого элементу должно быть установлено позиционирование. При этом, он удаляется
из основного потока документа. Остальные элементы занимают его место, как будто его вообще нет.
Иногда можно встретить информацию, что элементы, которым установлено свойство float,
тоже удаляются из основного потока. Но это не совсем правильно, потому что строковые элементы не занимают их
место.

CSS position

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

— данное значение задает абсолютное позиционирование элемента. Что это значит? Во-первых, абсолютно позиционированный элемент полностью отделяется от общего потока HTML-документа. Другие элементы страницы будут вести себя так, будто абсолютно позиционированного элемента не существует. Во-вторых, абсолютно позиционированный элемент можно перемещать относительно его родителя (по умолчанию это окно браузера) при помощи свойств , , и (о них мы расскажем уже в следующем уроке).
— относительное позиционирование элемента. В данном случае элемент, как обычно, размещается относительно своего текущего положения в потоке документа, то есть визуальных изменений не видно. Но затем, пользуясь свойствами , , и , можно двигать относительно позиционированный элемент в нужном направлении (начальной точкой отсчета будет исходное положение элемента). Это чем-то похоже на функцию translate() свойства transform.
— фиксированное позиционирование элемента. По принципу работы это похоже на абсолютное позиционирование, однако разница в том, что в отличие от абсолютно позиционированного элемента, фиксированный элемент остается на месте при прокрутке веб-страницы (аналогичным образом себя ведет фиксированное фоновое изображение).
— это микс относительного и фиксированного позиционирования. Элемент позиционируется относительно до тех пор, пока не пересекает определенный порог, после чего элемент становится фиксированным в рамках ближайшего родителя. По состоянию на 2017 год не очень хорошо поддерживается браузерами. Необходимо использование вендорного префикса .
(значение по умолчанию) — статическое позиционирование. Такой элемент ведет себя как обычно. На практике данное значение может применяться, например, для перезаписи другого значения. Свойства , , и не влияют на элемент со статическим позиционированием.

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

Далее в учебнике: свойства top, left, bottom и right для перемещения позиционированных элементов.

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

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

А вот пример:

See the Pen Little-known thing #3 — The inline elements which are absolutely positioned behave as block-level elements by George (@georgemarts) on CodePen.

В данном случае мы создали два разных элемента. Первый (зеленый блок) это блочный элемент, а второй (красный блок) — строчный. Изначально виден только зеленый блок.

Красный блок не виден потому, что заданные ему свойства и работают только с блочными и строчно-блочными элементами, а так как в нем нет контента, у него нет никаких размеров.

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

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

Элементы с фиксированным позиционированием располагаются на странице относительно окна браузера. Такие элементы удаляются из общего потока, элементы, следующие в потоке за фиксированным элементом, будут игнорировать его, смещаясь и занимая его место на веб-странице.

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      img {
		position: fixed;
		top: 5%;
		left: 40%
	  }
    </style>
  </head>

  <body>
    <img src="donald.gif">
	 <pre>Текст
      Текст
      Текст
      Текст
      Текст
      Текст
      Текст
      Какой-то текст
      Текст
      Текст
      Текст
      Текст
      Текст</pre>
  </body>
</html>

Попробовать »

«Position relative» – зачем вообще это нужно?

Данное свойство позволяет располагать элемент относительно других элементов, но работает он не так, как absolute. Если при формировании абсолютного и фиксированного позиционирования размеры элемента в формировании сайта не учитывались, то с relative им приходится считаться. Давайте рассмотрим пример.

Возьмем созданные нами ранее 4 блока и расположим их рядом друг с другом.

.one{
  float:left;
}
.two{
  float:left;
}
.three{
  float:left;
}
.four{
  float:left;
}
.clr{
  clear:both;
}

Блоки выстроились рядом друг с другом. Зачем я создал новый блок clr? Читайте об этом здесь. Теперь давайте зададим первому блоку position relative и попробуем его сместить его право и вниз.

.one{
    float:left;
    position:relative;
    top:20px;
    left:40px;
}

Розовый блок опустился вниз и отодвинулся чуть вправо, но при этом, остальные блоки остались на месте.

Таким образом, вы можете смещать элементы относительно друг друга так как вам нужно. А еще у позиционирования есть интересное свойство z-index, которое позволяет накладывать элементы друг на друга. Давайте зададим второму и четвертому блоку z-index:10 и посмотрим, что получится.

Первый блок оказался снизу второго и четвертого. Получается, что данное свойство позволяет управлять элементами и выводить определенные на первое место, а другие, наоборот, прятать.

Ну и напоследок осталось рассмотреть заключительные 2 свойства. Они довольно простые, поэтому рассматривать с примерами их не будем.

Position inherit – задает выбранному элементу точно такое же позиционирование, как у его родителя, т.е. фактически копирует его.

Position static – задается всем элементам на карте автоматически, если не задано иное. При этом, static не позволяет нам менять положение с помощью top, bottom, right и left.

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

При задании подобного позиционирования элемент перестаёт существовать в потоке документа и его положение задаётся относительно краёв браузера или родительского окна.

Ширина элемента, если она не задана явно, определяется шириной содержимого с учётом padding, border и margin. Элемент не меняет своё исходное положение, если у него нет свойств right, left, top и bottom. Одновременно указанные свойства left и right формируют ширину элемента, но только если width не указано. Если добавить свойство width, то значение right будет проигнорировано. Аналогично с высотой элемента при использовании свойств top, bottom и height.

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

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

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

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

Абсолютное позиционирование позволяет скрывать элементы. Для этой цели часто добавляется стиль left: -9999px, который переносит элемент далеко влево за область просмотра. В частности, этот приём используется для стилизации переключателей и флажков, когда скрывают настоящий флажок, а вместо него стилизуют элемент label, связанный с input и выполняющим его функции.

Применим абсолютное позиционирование к первом блоку.

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

Но здесь нас может подстерегать неожиданность. Допустим, мы решили сместить первый блок немного вправо и вниз, как мы это уже делали с относительным позиционированием.

Сюрприз! Блок разместился в указанной позиции относительно окна браузера, а не своего родительского контейнера, так как на самом деле блок выпал из него. Это справедливо, если родительский блок имеет статичное позиционирование (static), которое в нашем случае опущено, так как используется по умолчанию.

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

Запоминаем связку: родитель (относительное) — дочерний (абсолютное). По умолчанию перемещение происходит относительно сторон окна браузера, но если у родительского элемента задано position: relative, то произойдёт смена системы координат и смещение происходит относительно родительского блока. Значения padding не учитываются.

На самом деле, родительский блок мог иметь любые другие значения, кроме static. Если попробовать связку absolute-absolute, то ничего не изменится.

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

Виды позиционирования

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

Существуют следующие виды позициционирования блоков:

Абсолютное позиционирование. Элемент размещается
по указанным координатам. Координаты отсчитываются от границ страницы или от границ внешнего блока,
если этот блок тоже имеет позиционирование.

Относительное позиционирование. Элемент смещается
относительно того места, которое он занимал в основном потоке документа. Другие элементы не занимают его место.
Оно остаётся пустым, если его не перекроют позиционированные элементы.

Фиксированное позиционирование. Элемент
размещается по координатам относительно границ окна браузера. При прокрутке страницы такой элемент не движется
вместе со всеми элементами, а остаётся на одном месте в окне браузера.

Статическое позиционирование. Это расположение элемента в основном потоке документа.
То есть, элемент находится там, где и должен находиться без позиционирования. Если ему заданы
координаты, то они игнорируются.

Позиционирование устанавливает свойство position. Оно принимает значения:

position: absolute; — абсолютное

position: relative; — относительное

position: fixed; — фиксированное

position: static; — статическое

Для указания координат используются свойства:

left — смещение левого края элемента относительно левой
границы окна браузера или внешнего блока.

right — смещение правого края элемента относительно правой границы окна браузера или
внешнего блока.

top — смещение верхнего края элемента относительно верхней границы окна браузера или
внешнего блока.

bottom — смещение нижнего края элемента относительно нижней границы окна браузера или
внешнего блока.

Эти свойства могут принимать следующие значения:

left: auto; — без смещения (по умолчанию)

left: величина в единицах измерения CSS

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

left: inherit; — значение принимается от родительского элемента

У остальных свойств значения указываются так же, как у left.

Значения

static

Алгоритм CSS позиционирования по умолчанию. Блок располагается в соответствии с нормальным потоком. Свойства top, right, bottom и left не применяются.

relative

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

Эффект применения свойства position: relative к табличным элементам:

table-row-group, table-header-group, table-footer-group и table-row смещаются относительно своей нормальной позиции в пределах таблицы. Если ячейки таблицы объединяют несколько строк, то смещаются только ячейки относительно позиционированной строки;
table-column-group, table-column не смещают соответствующий столбец, когда применено свойство position: relative;
table-caption и table-cell смещаются относительно нормальной позиции внутри таблицы. Если ячейка таблицы занимает несколько столбцов или строк, то смещается вся составная ячейка.

absolute

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

sticky

Позиция блока рассчитывается согласно нормальному потоку (как position: relative). Блок смещается и фиксируется относительно области просмотра и внешнего блока, и во всех случаях, включая табличные элементы, он не влияет на положение последующих элементов. Когда элемент позиционирован «прилипанием», положение следующего элемента задается без учета смещения. Эффект от применения position: sticky к табличным элементам такой же, как и от position: relative.

center

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

page

Позиция блока рассчитывается в соответствии с абсолютной моделью. В случае размещения внутри региона внешним блоком всегда является начальный контейнер.

Иначе содержащий блок определяется согласно абсолютной модели.

Как и в абсолютной модели, отступы блока не перекликаются с какими-либо другими отступами.