Тултипы, дропдауны и контекстные меню в production-интерфейсах (кабинеты, дизайн-системы, e-commerce) часто страдают от ручных расчётов координат через getBoundingClientRect. Типичная ошибка: забыли обновить позицию при скролле или ресайзе, и на мобильном устройстве компонент улетает за край экрана. CSS anchor-positioning решает это системно.
Как это работает
Якорному элементу задаёшь CSS-свойство
anchor-name: --anchor-id (или атрибут anchor). Прикреплённому элементу — position-anchor: --anchor-id и inset-area: top center для привязки по стороне. Координаты рассчитывает браузер, без JS..button {
anchor-name: --anchor-btn;
}
.tooltip {
position: absolute;
position-anchor: --anchor-btn;
inset-area: top center;
margin-top: 8px;
}<button class="button">Наведи</button>
<div class="tooltip">Я тултип!</div>
Production-пример с попапом
В связке с
popover можно открывать меню вообще без JS. Атрибут popovertarget на кнопке + popover на блоке. Браузер сам приклеивает попап к якорю и двигает его при переполнении окна. Это снижает визуальную регрессию и упрощает поддержку в компонентных библиотеках.Типичная ошибка и trade-off
Не путай
inset-area с anchor(). Первое — это готовое правило для одной из 12 сторон (top center, left middle и тд). Второе — функция для гибкой привязки к конкретной стороне якоря, если нужна нестандартная позиция. Ошибка: пишут inset-area, потом переопределяют его через транслейты в position-try-fallbacks. Лучше сразу использовать anchor() для сложных вариантов..tooltip {
position: absolute;
position-anchor: --anchor-btn;
bottom: anchor(top);
left: anchor(center);
transform: translateX(-50%);
}Предупреждение о поддержке и fallback
Chrome 125+ и Edge 125+ работают стабильно. Firefox и Safari — за флагами. Всегда оборачивай новое поведение в
@supports (anchor-name: --x). Если условие не сработало — оставляй старый JS-подход с useEffect или ResizeObserver. Не обещай pixel-perfect в старых браузерах.Вывод: CSS anchor-positioning убирает ручные расчёты координат и делает позиционирование предсказуемым при скролле и ресайзе — это шаг к стабильным интерфейсам без координатного спагетти.
