Справочник HTML & CSS

position-area

Ставит привязанный элемент в одну из девяти ячеек воображаемой сетки 3 × 3 вокруг якоря.

Синтаксис

position-area: block-side inline-side;

Значения

Параметр	Тип	Описание
top, bottom, center	keyword	Строка: над якорем, под ним или на его уровне.
left, right, center	keyword	Столбец: слева, справа или на уровне якоря.
span-*	keyword	Растянуть на две ячейки, например `span-right` занимает центральный и правый столбцы.

Примеры

Меню под кнопкой, выровненное по её левому краю:

<style>
  .btn { anchor-name: --menu-btn; }
  .menu {
    position: absolute;
    position-anchor: --menu-btn;
    position-area: bottom span-right;
    margin: 4px 0 0; padding: 4px 0; list-style: none;
    border: 1px solid #ccc; background: white;
  }
  .menu li { padding: 4px 12px; }
</style>
 
<button class="btn">Options</button>
<ul class="menu"><li>Edit</li><li>Share</li><li>Delete</li></ul>

Примечания

Одного слова достаточно, если по другой оси center: position-area: top ставит элемент над якорем по центру. Ячейка сетки ещё и ограничивает доступное место, поэтому длинный текст переносится, а не вылезает. Добавьте position-try, чтобы элемент мог перевернуться, когда не помещается.

См. также

anchor-name — Делает элемент якорем с именем, чтобы абсолютно позиционированный элемент из любого места страницы можно было поставить рядом с ним.
position-anchor — Выбирает якорь по умолчанию для элемента с `position: absolute` или `fixed`; от него затем считают `position-area` и `anchor()`.
anchor() — Возвращает положение стороны якоря; используется в `top`, `left`, `right`, `bottom`, чтобы привязать к нему элемент.
position-try-fallbacks — Перечисляет запасные положения привязанного элемента; браузер берёт первое, в котором элемент помещается на экране. Свои положения описываются правилом `@position-try`.

В учебнике

Привязка к якорю — CSS anchor positioning — как прикрепить подсказку или меню к другому элементу: anchor-name, position-anchor, функция anchor(), position-area, запасные позиции position-try-fallbacks и поддержка браузерами.

Спасибо, что читаете!