CSS Anchor Positioning: Забудь про костыли в тултипах
Слушай, давай по чесноку: сколько раз ты проклинал верстку, когда дизайнер рисовал «простой» тултип, который должен вылетать строго над кнопкой, не обрезаться краем контейнера и при этом не отваливаться при скролле? Ты подключал тяжеленный Popper.js или Floating UI, судорожно считал координаты через getBoundingClientRect и надеялся, что z-index не превратит твою жизнь в ад. В 2026 году этот цирк официально закрыт. На сцену вышло CSS Anchor Positioning API, и это — настоящий киллер-фича для любого, кто хоть раз пытался «приклеить» один элемент к другому.
Как мы страдали раньше
Раньше позиционирование плавающих элементов было похоже на попытку удержать медузу в руках. Основная проблема — overflow: hidden у родителя. Стоило поместить кнопку с тултипом в блок со скроллом, как тултип стыдливо обрезался. Чтобы этого избежать, мы выносили поп-апы в конец body, а потом мучительно синхронизировали их положение через JS.
Если раньше мы мучались даже с базовым выравниванием (кстати, зацени 10 актуальных способов отцентровать div, если еще не видел), то динамическая привязка тултипа к кнопке вообще казалась магией высшего уровня, доступной только библиотекам на 20кб кода. Мы писали слушатели на scroll и resize, которые нещадно нагружали главный поток, просто чтобы плашка не улетала в стратосферу.
Как делать правильно в 2026 году
Теперь всё решается на уровне браузера. Идея проста: мы объявляем один элемент «якорем» (anchor), а другому говорим: «Твоя жизнь теперь принадлежит этому парню». Браузер сам следит за геометрией, скроллом и пересчитывает координаты быстрее, чем ты успеешь сказать npm install.
Для этого используются два ключевых свойства: anchor-name для цели и position-anchor для плашки. А дальше — магия функции anchor(), которая позволяет привязывать стороны тултипа к сторонам кнопки. И не забудь, что всё это добро идеально ложится в современную структуру, особенно если ты уже понял, зачем использовать CSS Nesting вместо SASS и LESS. Код становится чистым, понятным и, главное, декларативным.
Готовый сниппет кода
Вот как выглядит минимальный рабочий пример. Никакого JavaScript, только чистый CSS:
/* Кнопка-якорь */
.anchor-button {
anchor-name: --my-anchor;
width: max-content;
}
/* Тултип, который знает свое место */
.tooltip {
position: absolute;
position-anchor: --my-anchor;
/* Привязываем низ тултипа к верху кнопки */
bottom: anchor(top);
/* Центрируем по горизонтали относительно якоря */
left: anchor(center);
transform: translateX(-50%);
/* Чтобы не вылетал за границы экрана */
margin-bottom: 8px;
background: #333;
color: #fff;
padding: 10px;
border-radius: 8px;
}
Частая ошибка новичков
Самый частый факап — забыть про position: absolute (или fixed) у всплывающего элемента. Anchor Positioning работает только с абсолютно позиционированными элементами. Если ты оставишь тултип в статичном потоке, свойство position-anchor просто проигнорируется, и ты будешь полчаса дебажить, почему ничего не двигается.
И еще один нюанс: не забывай про свойство position-try-options. Оно позволяет задать запасные позиции (fallback). Если тултип не влезает сверху, браузер сам перекинет его вниз или вбок, если ты это пропишешь. Это убивает последнюю причину использовать JS-библиотеки для поповеров.
🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!