Привязка к якорю

Подсказку над кнопкой или выпадающее меню раньше ставили так: родителю position: relative, подсказке position: absolute и координаты. Это работает, только если подсказка лежит внутри кнопки. Привязка к якорю (anchor positioning) позволяет прикрепить элемент к любому другому элементу страницы. Тот, к которому прикрепляют, называют якорем.

Якорь и привязанный элемент

Якорю дают имя свойством anchor-name. Имя начинается с двух дефисов, как у CSS-переменной. Привязанный элемент получает position: absolute и ссылку на якорь — position-anchor. Функция anchor() подставляет координату стороны якоря:

<style>
  .btn { anchor-name: --save; margin: 40px 0 0 60px; }
  .tip {
    position: absolute;
    position-anchor: --save;
    bottom: anchor(top);
    left: anchor(left);
    padding: 4px 8px;
    background: black;
    color: white;
    font-size: 14px;
  }
</style>
 
<button class="btn">Сохранить</button>
<span class="tip">Ctrl+S</span>

bottom: anchor(top) значит «низ подсказки — на уровне верха якоря». Подсказка стоит в разметке отдельно, а прилипла к кнопке.

position-area — проще

Считать стороны через anchor() не всегда нужно. Свойство position-area ставит элемент в одну из девяти клеток вокруг якоря — сам якорь в центре:

<style>
  .btn { anchor-name: --menu; margin: 8px 0 0 60px; }
  .menu {
    position: absolute;
    position-anchor: --menu;
    position-area: bottom;
    margin: 4px 0 0;
    padding: 8px 12px;
    background: white;
    border: 1px solid silver;
  }
</style>
 
<button class="btn">Меню</button>
<div class="menu">Профиль<br>Настройки<br>Выход</div>

Подсказка-popover

Привязку удобно сочетать с атрибутом popover из урока «Раскрывающиеся блоки и диалоги»: он открывает и закрывает блок, а CSS ставит его рядом с кнопкой. У popover есть свои стили по умолчанию, поэтому inset и margin сбрасывают:

<style>
  body { min-height: 140px; }
  .info { anchor-name: --info; margin: 70px 0 0 60px; }
  [popover] {
    position-anchor: --info;
    position-area: top;
    inset: auto;
    margin: 0 0 6px;
    padding: 6px 10px;
    border: 0;
    background: steelblue;
    color: white;
  }
</style>
 
<button class="info" popovertarget="hint">Что такое флэт уайт?</button>
<div id="hint" popover>Двойной эспрессо с тонким слоем молока.</div>

popover уже позиционирован браузером, поэтому position: absolute здесь не нужен.

Запасные позиции

Если подсказке не хватает места — например, якорь у самого верха окна, — она уйдёт за край. position-try-fallbacks перечисляет запасные варианты. flip-block переворачивает элемент по вертикали: был сверху — станет снизу:

<style>
  .btn { anchor-name: --top; margin: 4px 0 60px 60px; }
  .tip {
    position: absolute;
    position-anchor: --top;
    position-area: top;
    position-try-fallbacks: flip-block;
    padding: 4px 8px;
    background: seagreen;
    color: white;
  }
</style>
 
<button class="btn">Кнопка у верхнего края</button>
<span class="tip">Сверху места нет — я снизу</span>

Есть и flip-inline — переворот по горизонтали. Значения можно перечислить через запятую: браузер возьмёт первое, при котором элемент помещается.

Поддержка

Привязка к якорю появилась в Chrome и Edge в 2024 году, позже — в Safari. Состояние поддержки, особенно в Firefox, проверяйте на caniuse.com. Без поддержки элемент встанет по обычным правилам position: absolute, поэтому для важных подсказок оставляйте запасной вариант через @supports (anchor-name: --a).

Частая ошибка

Без position: absolute (или fixed) привязка не работает: anchor() и position-area действуют только на позиционированные элементы. Обычный блок просто останется в потоке:

<style>
  .btn { anchor-name: --a; margin-left: 60px; }
  .tip { position-anchor: --a; position-area: right; background: gold; padding: 4px; }
</style>
 
<button class="btn">Кнопка</button>
<div class="tip">Я не прилип — нет position: absolute</div>

Ещё одна причина — опечатка в имени: --save и --Save разные, как и у переменных.