Привязка к якорю: CSS Anchor Positioning

Anchor Positioning привязывает один элемент к другому средствами CSS: подсказка встаёт над кнопкой, меню раскрывается под ней, а при нехватке места у края окна браузер сам переносит их на другую сторону. Раньше для этого подключали JavaScript-библиотеки вроде Popper или Floating UI, а теперь современные браузеры поддерживают это из коробки.

.button {
    anchor-name: --button;
}
.tooltip {
    position: absolute;
    inset: auto;
    position-anchor: --button;
    position-area: top;
    position-try-fallbacks: flip-block;
    margin: 8px;

    /* Оформление */
    box-sizing: border-box;
    white-space: pre-wrap;
    padding: 8px 12px;
    border: 1px solid #c9d0dc;
    border-radius: 8px;
    background: #fff;
    color: #182238;
    overflow-wrap: anywhere;
}

<button type="button" class="button">Кнопка</button>
<div class="tooltip" id="anchor-content">Подсказка к кнопке</div>

.button {
    anchor-name: --button;
}
.tooltip {
    position: absolute;
    inset: auto;
    position-anchor: --button;
    position-area: top;
    position-try-fallbacks: flip-block;
    margin: 8px;

    /* Оформление */
    box-sizing: border-box;
    white-space: pre-wrap;
    padding: 8px 12px;
    border: 1px solid #c9d0dc;
    border-radius: 8px;
    background: #fff;
    color: #182238;
    overflow-wrap: anywhere;
}

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

Якорь получает имя в свойстве anchor-name; имя начинается с двух дефисов, как у CSS-переменной. Привязанный элемент указывает это имя в position-anchor и должен быть позиционирован абсолютно или фиксированно — тогда position-area размещает его относительно якоря. Класс кнопки при этом может быть любым: привязку задаёт только совпадение имени в anchor-name и position-anchor.

.button {
    anchor-name: --button; /* имя якоря */
}
.tooltip {
    position: absolute;
    position-anchor: --button; /* то же имя */
    position-area: top;
}

position-area делит пространство вокруг якоря сеткой 3×3. Одно ключевое слово (top, right) — сторона по центру якоря, два (top left) — угол. Ключевые слова с span- растягивают область на соседнюю ячейку: bottom span-right выравнивает меню по левому краю кнопки и даёт ему расти вправо.

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

Свойство position-try-fallbacks перечисляет, куда переставить элемент, если на основной позиции он не помещается в своём блоке. Браузер пробует варианты по порядку и берёт первый подходящий.

• flip-block — отразить по вертикали: сверху вниз и обратно.
• flip-inline — отразить по горизонтали: справа налево и обратно.
• flip-block flip-inline — оба отражения сразу, в противоположный угол.

Вместо готовых отражений можно указать другую область, например position-try-fallbacks: bottom, left, или собственное правило @position-try с поддерживаемыми дескрипторами положения, размера и выравнивания. В инструменте доступны отражения и четыре стороны; собственные правила можно добавить в скопированный CSS.

Функции anchor() и anchor-size()

Когда сетки недостаточно, координаты задают функцией anchor(): top: anchor(bottom) ставит верх элемента на нижний край якоря. Функция anchor-size() берёт размер якоря — width: anchor-size(width) делает выпадающий список ровно по ширине поля.

.menu {
    position: absolute;
    position-anchor: --button;
    top: anchor(bottom);
    left: anchor(left);
    min-width: anchor-size(width);
}

Связанные материалы

Основы позиционирования — в уроке «Позиционирование элементов» и в статье о свойстве position. Отработать position и z-index можно в тренажёре размеров и позиционирования.