62. CSS Anchor Positioning

CSS Anchor Positioning

Иллюстрация к уроку

CSS Anchor Positioning — одна из самых мощных новинок в CSS 2024–2025. Она позволяет позиционировать один элемент относительно другого — якоря — без JavaScript. Всё, что раньше требовало Popper.js или Floating UI, теперь делается нативно в CSS.

Chrome 125+, Edge 125+. Safari и Firefox — в разработке. Для продакшена используй с feature detection или полифилом.

Проблема, которую решает Anchor Positioning

Раньше чтобы показать тултип под кнопкой, нужно было:

Рассчитывать позицию через getBoundingClientRect() в JS
Пересчитывать при скролле и ресайзе
Подключать библиотеки типа Popper.js

Теперь:

button {
  anchor-name: --my-button;     /* 1. Называем якорь */
}

.tooltip {
  position: absolute;
  position-anchor: --my-button; /* 2. Привязываемся к нему */
  top: anchor(bottom);          /* 3. Позиционируем через anchor() */
  left: anchor(center);
  translate: -50% 0;
}

anchor-name — объявить якорь

Любой элемент может быть якорем. Нужно только дать ему имя через anchor-name:

.button {
  anchor-name: --btn;    /* имя начинается с -- (как CSS-переменные) */
}

.badge {
  anchor-name: --badge;
}

position-anchor — привязать плавающий элемент

Плавающий элемент (position: absolute или fixed) привязывается к якорю:

.tooltip {
  position: absolute;
  position-anchor: --btn;   /* привязываемся к якорю --btn */
}

anchor() — функция позиционирования

anchor() возвращает координату якоря. Используется в top, right, bottom, left, inset:

.tooltip {
  position: absolute;
  position-anchor: --btn;

  /* Расположить снизу от якоря */
  top: anchor(bottom);        /* верх тултипа = низ кнопки */
  left: anchor(center);       /* центр тултипа = центр кнопки */
  translate: -50% 8px;        /* сдвиг для точного выравнивания */
}

Доступные ключевые слова в anchor():

Значение	Что означает
`top`	верхняя граница якоря
`bottom`	нижняя граница якоря
`left`	левая граница якоря
`right`	правая граница якоря
`center`	центр якоря (по оси зависит от свойства)
`start` / `end`	логические значения

anchor-size() — размеры якоря

Можно задавать размер плавающего элемента относительно якоря:

.dropdown {
  position: absolute;
  position-anchor: --btn;
  top: anchor(bottom);
  width: anchor-size(width);  /* ширина = ширина кнопки */
}

@position-try — запасные позиции

Если тултип не помещается вверху — пусть отображается снизу. @position-try описывает альтернативные варианты, position-try-fallbacks — порядок перебора:

@position-try --flip-bottom {
  top: anchor(top);
  translate: -50% -100%;
}

.tooltip {
  position: absolute;
  position-anchor: --btn;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;

  /* Если не влезает — попробовать --flip-bottom */
  position-try-fallbacks: --flip-bottom;
}

inset-area — сетка позиционирования (новый подход)

inset-area делает позиционирование ещё проще — через воображаемую сетку 3×3 вокруг якоря:

.tooltip {
  position: absolute;
  position-anchor: --btn;
  inset-area: bottom center;  /* ниже и по центру якоря */
}

Значения — комбинации направлений: top, bottom, left, right, center, span-all, block-start и др.