Якорное позиционирование (Anchor Positioning) в CSS

Прощайте, костыли: Якорное позиционирование в CSS

Слушай, давай на чистоту: сколько часов ты убил на то, чтобы обычная всплывашка не «улетала» за пределы экрана или не обрезалась родительским overflow: hidden? Верстка тултипов, выпадающих меню и контекстных подсказок всегда была той еще головной болью. Мы либо воевали с Z-индексом, либо подключали тяжелые JS-библиотеки ради пары пикселей позиционирования. Но времена изменились. На дворе 2026 год (ну, почти), и CSS наконец-то научился «привязывать» элементы друг к другу нативно.

Якорное позиционирование (CSS Anchor Positioning) — это киллер-фича, которая позволяет связать один элемент (якорь) с другим (плавающим элементом) прямо в стилях, без единой строчки JavaScript для расчетов координат. Это именно то, чего нам не хватало последние лет десять.

Как мы страдали раньше

Раньше, чтобы реализовать какой-нибудь поповер, нам приходилось либо делать его дочерним элементом кнопки (привет, проблемы с доступностью и каскадом), либо использовать getBoundingClientRect() в JS, чтобы вычислить топ и лефт, а потом вешать слушатели на скролл и ресайз окна. Те, кто поопытнее, сразу брали Popper.js или Floating UI, но это лишние килобайты в бандле.

Особенно весело становилось, когда нужно было учесть границы вьюпорта. Если ты уже читал про стилизацию нативных элементов popover и dialog, то знаешь, что браузеры начали давать нам инструменты для слоев, но позиционирование всё равно оставалось на совести разработчика. Мы мучились с absolute, пытались поймать нужный offsetParent и вечно воевали с тем, что всплывашка перекрывается соседним блоком.

Как делать правильно в 2026 году

Современный подход строится на двух ключевых вещах: создании связи через anchor-name и использовании функции anchor(). Теперь плавающий элемент может находиться где угодно в DOM-дереве (хоть перед закрывающим тегом body), но при этом он будет «знать», где находится его кнопка-якорь.

Чтобы всё заработало, нам нужно:

• Назначить якорю уникальное имя через anchor-name: --имя-якоря.
• Указать плавающему элементу, за кем следить, через position-anchor: --имя-якоря.
• Использовать магическую функцию anchor() в свойствах top, left, right или bottom.

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

Готовый сниппет кода

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

/* Стили для кнопки-якоря */
.anchor-button {
  anchor-name: --my-tooltip-anchor;
  width: max-content;
}

/* Стили для всплывашки */
.tooltip-box {
  position: absolute; /* Обязательно! */
  position-anchor: --my-tooltip-anchor;
  
  /* Привязываем верх подсказки к низу кнопки */
  top: anchor(bottom);
  /* Центрируем относительно кнопки */
  left: anchor(center);
  transform: translateX(-50%);
  
  margin-top: 8px;
  padding: 10px;
  background: #333;
  color: white;
  border-radius: 4px;
}

И всё! Никаких расчетов в JS. Браузер сам пересчитает позицию .tooltip-box, если кнопка сдвинется или страница проскроллится. Это работает быстро, плавно и нативно.

Частая ошибка новичков

Самый частый факап — забыть, что плавающий элемент всё еще должен иметь position: absolute или position: fixed. Якорное позиционирование не работает со статичными элементами. Если ты задал anchor-name, но не указал тип позиционирования для «последователя», магия не случится — элемент просто останется в нормальном потоке документа.

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

🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!