anchor()
Возвращает положение стороны якоря; используется в `top`, `left`, `right`, `bottom`, чтобы привязать к нему элемент.
Синтаксис
top: anchor(--name side, fallback);Параметры
| Параметр | Тип | Описание |
|---|---|---|
| --name | dashed ident | Необязательно. Якорь; без него берётся указанный в `position-anchor`. |
| side | top | bottom | left | right | center | % | Какой край якоря взять: `top`, `bottom`, `left`, `right`, `center` или процент. |
| fallback | length | Необязательно. Значение, если якорь не найден. |
Примеры
Подпись, левый край которой начинается от середины блока, а верхний касается его низа:
<style>
.box { anchor-name: --box; width: 160px; height: 60px; background: lightblue; }
.label {
position: absolute;
top: anchor(--box bottom);
left: anchor(--box center);
background: navy; color: white; padding: 2px 8px;
}
</style>
<div class="box"></div>
<span class="label">Starts at the center</span>Примечания
Сторона должна подходить к свойству: в top и bottom — вертикальные (top, bottom, center), в left и right — горизонтальные. Родственная функция anchor-size() возвращает ширину или высоту якоря: width: anchor-size(width). Для простых случаев короче position-area.
См. также
- anchor-name — Делает элемент якорем с именем, чтобы абсолютно позиционированный элемент из любого места страницы можно было поставить рядом с ним.
- position-anchor — Выбирает якорь по умолчанию для элемента с `position: absolute` или `fixed`; от него затем считают `position-area` и `anchor()`.
- position-area — Ставит привязанный элемент в одну из девяти ячеек воображаемой сетки 3 × 3 вокруг якоря.
- top, right, bottom, left — Смещения позиционированного элемента от краёв области отсчёта: сверху, справа, снизу и слева.
Вопросы и ответы по теме
В учебнике
- Привязка к якорю — CSS anchor positioning — как прикрепить подсказку или меню к другому элементу: anchor-name, position-anchor, функция anchor(), position-area, запасные позиции position-try-fallbacks и поддержка браузерами.