Начало распродаж · Скидка на доставку · Поступление новой коллекции

BELAYA KASKA / FEATURE

designАвтор: Пуск‑Медиа (импорт)Просмотры: 3

CSS anchor positioning: тултипы и поповеры без absolute «на глаз»

`anchor-name` и `position-anchor` — привязка плавающих панелей к кнопкам с flip при нехватке места.

Изображение статьи: CSS anchor positioning: тултипы и поповеры без absolute «на глаз»

Anchor positioning связывает абсолютно позиционированный элемент с «якорем» (кнопка, аватар) через anchor-name / position-anchor, уменьшая хрупкость координат top/left в JS.

Для простых тултипов по-прежнему уместен Popover API; anchor positioning — когда нужны сложные меню и стрелки в design system.

- [CSS anchor positioning — MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning) — Свойства anchor и fallbacks.

- [Anchor positioning — Chrome Developers](https://developer.chrome.com/docs/css-ui/anchor-positioning-api) — Обзор API и примеры.

---

## Внедрение

Тестируйте на мобильных клавиатурах и при zoom 200%: якорь не должен уезжать за край экрана.

Документируйте в UI-kit пару токенов offset, а не уникальный absolute на каждой странице.

#CSS#UI#поповеры

Мы используем обязательные cookie для работы сайта (корзина, вход, оформление заказа) и необязательные — для аналитики и маркетинга. Вы можете принять все, отклонить необязательные или настроить категории. Подробнее в политике cookies.