Абсолютное позиционирование в CSS: понять раз и навсегда

2
5575
Добавить в избранное

Вы все еще не понимаете как работает абсолютное позиционирование в CSS и теряете элементы на экране? Давайте разбираться в этой магии.

Абсолютное позиционирование в CSS: понять раз и навсегда

Введение в позиционирование

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

Рассмотрим код с четырьмя дивами, вложенными друг в друга по принципу матрешки.

Блоки box-1, box-2 и box-3 для красоты отцентрированы с помощью свойств margin: auto и свойств flex CSS. Блок box-4 остается в своей дефолтной позиции в потоке документа.

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

Абсолютное позиционирование в CSS
.box-4 без позиционирования

Относительно чего позиционируем?

Чтобы спозиционировать себя, элемент должен знать две вещи:

  • какой родитель станет точкой отсчета;
  • величину смещения относительно точки отсчета (сверху, снизу, справа или слева).

Если определить position: absolute для box-4, этот элемент покинет нормальный поток документа. Но сейчас он остается на своем месте, так как координаты смещения не заданы. Если в CSS ширина элемента не определена, она будет равна ширине его содержимого (плюс паддинги и рамка).

Абсолютное позиционирование в CSS
.box-4 с абсолютным позиционированием без смещения

Теперь добавим свойства top: 0 и left: 0. Элемент должен определить, какой родительский контейнер станет точкой отсчета для этих координат. Ей становится ближайший элемент с нестатической позицией (чаще всего position: relative). box-4 начинает поочередно опрашивать своих предков. Ни box-3, ни box-2, ни box-1 не подходят, так как имеют позиционирование в CSS по умолчанию (unset).

Если позиционированный предок не нашелся, элемент размещается относительно тела документа (body):

Абсолютное позиционирование в CSS
.box-4 с абсолютным позиционированием. Родительские элементы без позиционирования

Если установить position: relative для элемента box-1, точкой отсчета станет он:

Абсолютное позиционирование в CSS
.box-4 с абсолютным позиционированием. .box-1 с относительным позиционированием

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

Как только точка отсчета нашлась, все, что выше нее в DOM-дереве, перестает иметь значение.

Если установить position: relative также для box-2, то box-4 будет позиционироваться относительно него, ведь этот предок ближе.

Абсолютное позиционирование в CSS
.box-4 с абсолютным позиционированием. .box-2 с относительным позиционированием

Аналогично и для контейнера box-3:

Абсолютное позиционирование в CSS
.box-4 с абсолютным позиционированием. .box-3 с относительным позиционированием

А вот и наглядный красивый CSS-пример поиска позиционированного предка:

Перевод статьи How to understand CSS Position Absolute once and for all.

Еще больше полезных статей по CSS:

Интересуетесь фронтендом?

Подпишитесь на нашу рассылку, чтобы получать больше интересных материалов:

И не беспокойтесь, мы тоже не любим спам. Отписаться можно в любое время.




2 Комментарии

  1. Хорошая статья для начинающего. В свое время я не до конца понимал как он работает, но методом «тыка» определил, все что описано в этой статье.

Оставьте комментарий