anchor-name
Делает элемент якорем с именем, чтобы абсолютно позиционированный элемент из любого места страницы можно было поставить рядом с ним.
Синтаксис
anchor-name: --name;Значения
| Параметр | Тип | Описание |
|---|---|---|
| --name | dashed ident | Имя якоря; начинается с двух дефисов, как пользовательское свойство. |
| none | keyword | По умолчанию: элемент не якорь. |
Примеры
Значок, прикреплённый к углу кнопки:
<style>
.btn { anchor-name: --cart; margin: 24px; padding: 8px 16px; }
.badge {
position: absolute;
position-anchor: --cart;
position-area: top right;
translate: -50% 50%;
background: crimson; color: white;
border-radius: 10px; padding: 0 6px; font-size: 12px;
}
</style>
<button class="btn">Cart</button>
<span class="badge">3</span>Примечания
Якорь и позиционируемый элемент не обязаны быть родителем и потомком — в этом главное отличие от привычного position: absolute внутри position: relative. Если одно имя есть у нескольких элементов, используется последний. Это часть якорного позиционирования CSS: Chrome и Edge — с 2024 года, Safari — с версии 26; поддержку в Firefox проверяйте перед использованием.
См. также
- position-anchor — Выбирает якорь по умолчанию для элемента с `position: absolute` или `fixed`; от него затем считают `position-area` и `anchor()`.
- anchor() — Возвращает положение стороны якоря; используется в `top`, `left`, `right`, `bottom`, чтобы привязать к нему элемент.
- position-area — Ставит привязанный элемент в одну из девяти ячеек воображаемой сетки 3 × 3 вокруг якоря.
- position — Как позиционируется элемент: в обычном потоке или по смещениям.
Вопросы и ответы по теме
В учебнике
- Привязка к якорю — CSS anchor positioning — как прикрепить подсказку или меню к другому элементу: anchor-name, position-anchor, функция anchor(), position-area, запасные позиции position-try-fallbacks и поддержка браузерами.