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

Хочешь уверенно проходить IT-интервью?

Готовься к IT-собеседованиям уверенно с AI-тренажёром T1!

Мы понимаем, как сложно подготовиться: стресс, алгоритмы, вопросы, от которых голова идёт кругом. Но с AI тренажёром всё гораздо проще.

💡 Почему Т1 тренажёр — это мастхэв?

  • Получишь настоящую обратную связь: где затык, что подтянуть и как стать лучше
  • Научишься не только решать задачи, но и объяснять своё решение так, чтобы интервьюер сказал: "Вау!".
  • Освоишь все этапы собеседования, от вопросов по алгоритмам до диалога о твоих целях.

Зачем листать миллион туториалов? Просто зайди в Т1 тренажёр, потренируйся и уверенно удиви интервьюеров. Мы не обещаем лёгкой прогулки, но обещаем, что будешь готов!

Реклама. ООО «Смарт Гико», ИНН 7743264341. Erid 2VtzqwP8vqy


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

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

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

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

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

<body>
<div class="box-1">
  <div class="box-2">
    <div class="box-3">
      <div class="box-4"></div>
    </div>
  </div>
</div>
</body>

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

body {
  display: flex;
}

.box-1,
.box-2,
.box-3 {
  display: flex;
  margin: auto;
}

Все 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:

МЕРОПРИЯТИЯ

Комментарии

ВАКАНСИИ

Добавить вакансию
Golang-разработчик
Пермь, по итогам собеседования
Hotel Search Team Lead (Golang)
по итогам собеседования

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ