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

Значения background-position

В качестве значений могут выступать как специальные ключевые слова, так и числовые значения в единицах измерения CSS — процентах, пикселях и т. д.

Ключевые слова для горизонтального позиционирования

• — фоновый рисунок прилеплен к левой стороне элемента;
• — фоновый рисунок расположен в центре оси x;
• — фоновый рисунок прилеплен к правой стороне элемента.

div {
	background-position-x: left;
}

Ключевые слова для вертикального позиционирования

• — фоновый рисунок прилеплен к верхней стороне элемента;
• — фоновый рисунок расположен в центре оси y;
• — фоновый рисунок прилеплен к нижней стороне элемента.

div {
	background-position-y: bottom;
}

Сокращенная запись для двух осей

Часто позиционирование фона задается сразу для двух осей. Для этого удобно пользоваться сокращенной записью, т. е. свойством background-position. Оно принимает одно либо два значения (для позиционирования сразу по двум осям либо по каждой отдельно соответственно).

Ниже — различные примеры позиционирования фона с помощью ключевых слов:

background-position: top center; /* фон вверху по центру */
background-position: top right; /* фон в верхнем правом углу */
background-position: bottom left; /* фон в левом нижнем углу */
background-position: center right; /* фон справа по центру */

Значения можно менять местами — они будут работать так же.

Примеры выравнивания фона с помощью background-position

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

Для позиционирования фона можно использовать и одно значение для двух осей сразу:

background-position: center; /* фон по центру */
background-position: left; /* фон слева по центру */
background-position: right; /* фон справа по центру */
background-position: top; /* фон вверху по центру */
background-position: bottom; /* фон внизу по центру */

Точные значения в единицах измерения CSS

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

div {
background-position: 10px 25px;
}

Такая запись означает, что фон удален от левого края на 10 пикселей и от верхнего края на 25 пикселей. Здесь важен порядок записи значений: первое значение отвечает за положение фонового рисунка по горизонтали, второе — по вертикали. Допустимы и отрицательные значения (например, они могут быть полезны в случае, если с левой или верхней стороны фоновой картинки есть область, которую необходимо спрятать).

Регулировать расстояние фона, отталкиваясь от правой или нижней стороны элемента, можно с помощью специального значения, которое записывается так:

div {
background-position: right 15px bottom 40px;
}

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

Процентные значения

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

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

Обратите внимание: значение идеально центрирует фоновое изображение (как по вертикали, так и по горизонтали), поскольку точка центра устанавливается в середине фона, а не в его начале или конце

Комбинирование значений

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

Позиционирование элементов с пикселями и процентами

Использовали ли вы когда-либо проценты вместо пикселей для позиционирования элементов? Если ответ да, то вы знаете, что смещение элемента зависит от выбранных единиц исчисления (пикселей или процентов).

Это немного смущает, правда? Итак, сначала посмотрим, что говорит спецификация об смещении в процентах:

Как было сказано, при задании смещения в процентах, позиция элемента зависит от ширины и высоты его родителя.

Демо показывает эту разницу:

See the Pen Little-known thing #5 — The difference between positioning elements with pixels and percentages by George (@georgemarts) on CodePen.

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

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

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

Как на самом деле работает position: sticky в CSS

«Липкое» позиционирование состоит из двух основных частей: «липкого» элемента и «липкого» контейнера.

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

Пример:

.some-component {  position: sticky;  top: 0px;}

«Липкий» контейнер — это HTML-элемент, который оборачивает «липкий» элемент. Это максимальная область, в которой может перемещаться наш элемент.

Когда вы задаёте элементу , его родитель автоматически становится «липким» контейнером!Очень важно это запомнить! Контейнер будет являться областью видимости для элемента. «Липкий» элемент не может выйти за пределы своего «липкого» контейнера

В этом причина, почему в предыдущем примере «липкий» элемент не залипал: он был единственным дочерним элементом контейнера.

Наглядный пример:

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

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

А вот пример:

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

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

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

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

Вопросы и задачи по теме

Перед тем как перейти к изучению следующей темы пройдите практическое задание:

Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:

Используя полученные знания составьте следующий документ:

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

Позиционирование элементов в CSS

Трансформация элементов. Часть 1.

МЕНЮ

(adsbygoogle = window.adsbygoogle || []).push({});

×

Кажется, вы используете блокировщик рекламы 🙁

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

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.

Как отключить?
Поддержать

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

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

Для этого у нас есть специальное свойство text-align, которое так же имеет несколько значений:

• text-align: center; — для выравнивания по центру
• text-align: left; — по левой стороне
• text-align: right; — по правой стороне
• text-align: justify; — по ширине блока или страницы.

Для того чтобы его применить к нашему тексту можно воспользоваться одним из предложенных вариантов:

1. 1.Присвоить тегу блока (заголовка, формы, абзаца или другому блочному элементу) CSS класс:

   PHP

   <div class=”block-text”>Здесь текст</div>

   1	<div class=”block-text”>Здесьтекст<div>

   А затем в CSS файле вашего сайта пишем:

   PHP

   .block-text {
   text-align: center;
   }

   1 2 3

   .block-text{ text-aligncenter; }

   Вместо block-text может быть любое другое название класса.

   Также можно не присваивать новый класс, а использовать уже существующий. В этой статье с видео инструкцией я показывала как определить класс или идентификатор элемента на сайте: “Как определить ID и класс элемента на странице?”

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

   PHP

   .block p {
   text-align: center;
   }

   1 2 3

   .blockp{ text-aligncenter; }

   В этом случае выравнивание текста по центру применится для всех тегов

   , которые находятся внутри тега с классом block:

   PHP

   <div class=”block”>
   <p>Первый абзац</p>
   <p>Второй абзац</p>
   ….
   </div>

   1 2 3 4 5

   <div class=”block”> <p>Первыйабзац<p> <p>Второйабзац<p> …. <div>

   Для выравнивания заголовков внутри блока с классом block запись будет немного другая:

   PHP

   .block h1, .block h2, .block h3, .block h4, .block h5, .block h6 {
   text-align: center;
   }

   1 2 3

   .block h1,.block h2,.block h3,.block h4,.block h5,.block h6{ text-aligncenter; }

   Так же вы можете задать эти CSS свойства в HTML коде страницы или подключить свой отдельный CSS файл. Как это сделать написано в этой статье:«Как css подключить к html?»

2. 2.Можно дописать нужные CSS свойства в самом теге при помощи атрибута style:

   PHP

   <p style=” text-align: center;”>Пример текста</p>

   1	<pstyle=”text-aligncenter;”>Примертекста<p>

   Этот способ, так же как и атрибут align или тег center, удобен только в тех случаях, когда выравнивание нужно сделать в одном или нескольких местах. Для массового выравнивания текста я его не рекомендую использовать.

Описанные выше способы помогут вам выровнять по центру текст. Так же вам могут понадобиться вот эти материалы:«Как выровнять текст или блок по вертикали в CSS?»«Выравнивание картинки по центру HTML и CSS»

С уважением Юлия Гусарь

Реальное положение вещей

Реальность, как обычно, накладывает на разработчика еще большие ограничения, чем сама технология в чистом виде. Самую большую проблему представляет Internet Explorer для Windows, поддержка CSS в котором не обновлялась уже 4 года. Вообще, у него багов, связанных с CSS’ом довольно много, и все они подробно описаны на страницах интернета. Для исчерпывающего списка советую покопаться в «css-discuss wiki» и в «Position is everything». Я же остановлюсь на двух особенно заметных проблемах.

Атоматические размеры

В WinIE не работает задание размеров боксов через одновременную установку координат противоположных сторон. Это, однако, довольно легко обходится использованием интересной способности IE рассчитывать значения свойства для CSS с помощью Javascript. Возьмем тот же пример с боксом во всю ширину и margin’ами и padding’ами по 20 пикселов:

Код для этого выглядит так:

Здесь IE просто проигнорирует и бокс останется у левого края, обтягивая свое содержимое:

Чтобы такого не было, ему надо задать какую-то конкретную ширину. Но поскольку указать ее точной цифрой мы не можем, так как неизвестно, какая ширина будет у родительского бокса, то мы заставим IE высчитывать эту ширину:

— это текущая ширина бокса страницы. А число 82 — это margin’ы+padding’и+border’ы с двух сторон бокса.

Если нужно взять ширину не «body», а какого-то произвольного бокса, то ему надо дать id (пусть будет «mainbox») и тогда его ширина будет браться так: .

Fixed

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

Существует способ сымитировать поведение фиксированного позиционирования (чтобы бокс не скролился) с помощью абсолютного. Возьмем такую структуру:

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

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

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

Значения свойства

Пример

CSS Свойство:

position:

Результат:

myDIV

CSS Код:

div#myDIV { width: 100px; height: 100px; background: red; left: 10px; top: 100px; position: static; }

Кликните на любое значение свойства, чтобы увидеть результат

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

Абсолютное позиционирование в CSS используется для того, чтобы разместить элемент в конкретном месте
страницы. Прежде чем размещать позиционированные элементы, создадим страницу и добавим на неё два блока.
Они будут находиться в основном потоке документа. Один из них будет с большой высотой. Это нужно для
того, чтобы у страницы появилась прокрутка и Вы могли увидеть, как позиционированные элементы ведут
себя при прокрутке. Кроме того вы поймёте, как элементы с разными видами позиционирования располагаются
относительно основного потока. Для всех блоков на странице установим фон.

Стиль:

+

div
  {
  background-color: #909090;
  }
.stream
  {
  background-color: Blue;
  width: 100px;
  margin-bottom: 2px;
  }

HTML код:

<div class="stream" style="height: 300px"></div>
<div class="stream" style="height: 1500px"></div>

Теперь добавим на страницу блок с абсолютным позиционированием. Укажем координаты слева и сверху:

Стиль:

#abs_left
  {
  position: absolute;
  left: 40px;
  top: 20px;
  }

HTML код:

<div id="abs_left">Абсолютное позиционирование<br>
слева сверху</div>

Позиционированный элемент наложился на синий блок и частично закрыл его

Обратите внимание — элемент
имеет ширину по размеру контента. Это особенность позиционированных блоков

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

Добавим на страницу ещё один блок с абсолютным позиционированием, но теперь укажем координаты справа
и снизу:

Стиль:

#abs_right
  {
  position: absolute;
  right: 10px;
  bottom: 60px;
  }

HTML код:

<div id="abs_right">Абсолютное позиционирование<br>
справа снизу</div>

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

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

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

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

Вот пример:

See the Pen Little-known thing #4 — The margins don’t collapse on absolutely positioned elements by George (@georgemarts) on CodePen.

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

Но как мы можем предотвратить схлопывание отступов? Нам нужно поместить между ними какой-либо разделитель.

Это может быть внутренний отступ () или граница (), их можно применять как к родительскому, так и к дочернему элементу. Другой вариант — добавить клирфикс к родительскому элементу.

Обзор доступных способов позиционирования

Свойство CSS определяет тип позиционирования элемента.

Опции для позиционирования

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

Для этого надо свойству задать одно из следующих значений:

И только после задания позиционирования, можно использовать свойства, смещающие элемент:

• Начальное значение этих свойств — ключевое слово .

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

Различия между основными способами позиционирования

Теперь быстро рассмотрим три базовых различия между доступными типами позиционирования:

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

Подробнее это можно рассмотреть в демо:

See the Pen Overview of the available positioning types by George (@georgemarts) on CodePen.

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

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

Уровень 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 */

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

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

2. Сам элемент сделайте абсолютно позиционированным
   (position: absolute).

3. Поместите элемент посередине контейнера с помощью ‘top: 50%’.
   (Заметьте, что ‘50%’ здесь означают 50% высоты контейнера.)

4. Используйте translate, чтобы переместить элемент вверх на
   половину своей собственной высоты. ( ‘50%’ в ‘translate(0, -50%)’
   указывают на высоту самого элемента.)

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

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

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

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

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

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

<!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>

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

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

Встроенный элемент, который позиционирован, как absolute или fixed, приобретает характеристики элементов уровня блока.

Мы определяем два различных элемента. Первый из них (зеленое поле) является блочным элементом (т.е. div). Второй (красное поле) является встроенным элементом (span)

Обратите внимание, что у нас отображается только зеленое поле

Красное поле не видно, потому что мы задаем для него свойства width и height, которые могут быть применены только к блочным и встроенным блочным элементам. И это пустой элемент (т.е. он не содержит вложенных или дочерних элементов).

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

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

Установка относительного позиционирования элементу осуществляется посредством задания ему CSS свойства .

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

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

position: relative;
/* для сдвига элемента вверх на 10px */
top: -10px; /* или bottom: 10px; */
/* для сдвига элемента вниз на 10px */
top: 10px; /* или bottom: -10px; */  

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

position: relative;
/* элемент или элементы, к которым применяется эти стили будут сдвинуты на 15px вверх, а не на 10px как указано в bottom */
top: -15px;
bottom: 10px;

Для сдвига элемента вправо или влево используется CSS свойство или :

position: relative;
/* для сдвига элемента влево на 20px */
left: -20px; /* или right: 20px; */
/* для сдвига элемента вправо на 20px */
left: 20px; /* или right: -20px; */

Если одновременно установить и , то приоритетным будет значение, находящееся в :

position: relative;
/* элемент или элементы, к которым применяется эти стили будут сдвинуты на 25px вправо, т.к. значение left более приоритетно чем right */
left: 25px;
right: -20px;

Для сдвига по двум осям нужно использовать или , и или :

position: relative;
/*  стили для сдвига элементов вверх и влево на 5px */
top: -5px;
left: -5px;

Пример, в котором 2 элементу установим относительное позиционирование и сместим его на вверх и влево относительно его исходного положения:

<div class="container">
  <div class="element-1">FIRST ELEMENT</div>
  <!-- элемент имеет относительное позиционирование и смещён на 20px вверх и влево -->  
  <div class="element-2" style="position: relative; top: -20px; left: -20px;">SECOND ELEMENT</div>
  <div class="element-3">THIRD ELEMENT</div>
</div>

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

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

Абсолютно позиционированные элементы игнорируют свойство float

Если элемент перемещается влево или вправо, и при этом мы устанавливаем для него тип позиционирования absolute или fixed, то значение свойства float становится равным none. Но если мы устанавливаем тип позиционирования position relative CSS, элемент остается плавающим.

Посмотрите приведенное ниже демо:

В этом примере мы определяем два различных элемента, которые смещаются вправо

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

Основные отличия свойств позиционирования CSS

Кратко рассмотрим три основных различия между доступными типами позиционирования:

• Абсолютно позиционированный элемент полностью удаляется из нормального потока. Соседние элементы того же уровня занимают его пространство;
• За элементами с CSS position relative или stickily сохраняется их пространство. Соседние элементы не могут занимать пространство, отведенное для него. Но под смещение этого элемента не отводится места. Смещения полностью игнорируются, и в результате элементы могут накладываться друг на друга;
• fixed (подкатегория абсолютного позиционирования) — всегда позиционируется относительно окна просмотра. За исключением родительского элемента, который имеет свойство transform. Последние версии всех браузеров поддерживает такое поведение;
• sticky – элемент позиционируется относительно ближайшего родительского элемента с полосой прокрутки. Если такой родительский элемент отсутствует, то позиционирование происходит относительно окна просмотра.

Как работают все эти типы, можно увидеть в следующем демо:

Примечание: Значение sticky по-прежнему рассматривается как экспериментальная технология с ограниченной поддержкой браузерами. Конечно, можно использовать полифилл (например, stickyfill), чтобы добавить этот функционал для браузеров, которые изначально не поддерживают его.

Итого

Виды позиционирования и их особенности.

Иначе называется «без позиционирования». В явном виде задаётся только если надо переопределить другое правило CSS.

Сдвигает элемент относительно текущего места.

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

Визуально переносит элемент на новое место.

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

• Ширина элемента по умолчанию устанавливается по содержимому.
• Можно указать противоположные границы (). Элемент растянется.
• Окружающие элементы заполняют освободившееся место.

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

При прокрутке он остаётся на том же месте.