Anchor positioning — это новая технология в CSS, позволяющая размещать один элемент относительно другого, как будто у вас есть «якорь», за который можно привязать блок. Это удобно для всплывающих меню, тултипов, подсказок и любых элементов, которые появляются около другого.

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

Не путать с href="#id"

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Когда мы пишем:

<a href="#target">Перейти</a>

Это якорная ссылка, которая просто прокручивает страницу к элементу с id="target". Она не управляет расположением элементов на экране.

Anchor positioning — это про другое: про позиционирование одного блока относительно другого, независимо от прокрутки.

Пример: классический подход

Раньше, чтобы расположить элемент рядом с другим, мы использовали position: absolute и вычисляли координаты вручную:

<div id="target" style="position: relative;">
  Тут содержание
  <div style="position: absolute; top: 100%; left: 0;">
    Всплывающее меню
  </div>
</div>

Такой подход работает, но требует ручной настройки и не всегда адаптивен.

Что делает anchor positioning

С anchor positioning в CSS появляется возможность использовать один элемент как якорь для позиционирования другого, причём это делается декларативно.

Пример будущего синтаксиса (поддерживается пока только в некоторых браузерах, например, Chrome с флагами):

.popup {
  position-anchor: --tooltip;
  position: absolute;
  inset-area: anchor(center);
}

И в HTML:

<div id="target" anchor-name="--tooltip">
  Наведи сюда
</div>

<div class="popup">
  Подсказка!
</div>

В этом примере .popup будет размещён относительно элемента с anchor-name="--tooltip" — браузер сам вычислит координаты.

Важно: на сегодняшний день

Поскольку anchor positioning пока в статусе limited, использовать его в боевых проектах можно только с запасным планом. То есть:

  • делайте проверку поддержки через @supports или JavaScript;
  • предлагайте fallback — позиционирование через absolute/fixed и getBoundingClientRect().

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

Но пока это работает не везде. Если используете — обязательно обеспечьте резервный способ отображения. А как только поддержка станет широкой — anchor positioning упростит разработку интерактивных и адаптивных компонентов.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.