position-anchor
Выбирает якорь по умолчанию для элемента с `position: absolute` или `fixed`; от него затем считают `position-area` и `anchor()`.
Синтаксис
position-anchor: --name;Значения
| Параметр | Тип | Описание |
|---|---|---|
| --name | dashed ident | Имя, заданное какому-то элементу через `anchor-name`. |
| auto | keyword | По умолчанию: неявный якорь, если он есть (например, кнопка, открывшая поповер). |
Примеры
Подсказка под полем ввода:
<style>
input { anchor-name: --email; margin-bottom: 48px; }
.hint {
position: absolute;
position-anchor: --email;
top: anchor(bottom);
left: anchor(left);
margin-top: 4px;
background: #333; color: white; padding: 4px 8px; border-radius: 4px; font-size: 13px;
}
</style>
<input type="email" placeholder="Email">
<div class="hint">We never share your email.</div>Примечания
position-anchor говорит только, какой якорь использовать; куда поставить элемент, задают position-area или anchor() в top, left и других свойствах отступа. У элемента должно быть position: absolute или fixed.
См. также
- anchor-name — Делает элемент якорем с именем, чтобы абсолютно позиционированный элемент из любого места страницы можно было поставить рядом с ним.
- anchor() — Возвращает положение стороны якоря; используется в `top`, `left`, `right`, `bottom`, чтобы привязать к нему элемент.
- position-area — Ставит привязанный элемент в одну из девяти ячеек воображаемой сетки 3 × 3 вокруг якоря.
- popover — Превращает элемент во всплывающий слой поверх страницы — без JavaScript.
Вопросы и ответы по теме
В учебнике
- Привязка к якорю — CSS anchor positioning — как прикрепить подсказку или меню к другому элементу: anchor-name, position-anchor, функция anchor(), position-area, запасные позиции position-try-fallbacks и поддержка браузерами.