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

position-try-fallbacks

Перечисляет запасные положения привязанного элемента; браузер берёт первое, в котором элемент помещается на экране. Свои положения описываются правилом `@position-try`.

Синтаксис

position-try-fallbacks: flip-block, --custom;

Значения

Параметр	Тип	Описание
flip-block, flip-inline	keyword	Отразить текущее положение: верх ↔ низ или лево ↔ право.
position-area value	keyword	Готовое положение, например `top` или `right span-bottom`.
--name	@position-try	Именованный набор свойств из правила `@position-try --name`.

Примеры

Подсказка под кнопкой, которая перепрыгивает наверх, когда снизу нет места (прокрутите окно примера):

<style>
  .btn { anchor-name: --tip; margin-top: 120px; }
  .tip {
    position: absolute;
    position-anchor: --tip;
    position-area: bottom;
    position-try-fallbacks: flip-block;
    background: #333; color: white; padding: 4px 8px; border-radius: 4px;
  }
</style>
 
<button class="btn">Hover target</button>
<div class="tip">I flip when there is no room below</div>

Именованный запасной вариант со своими отступами:

<style>
  @position-try --to-right {
    position-area: right;
    margin-left: 8px;
  }
  .btn { anchor-name: --help; }
  .help {
    position: absolute;
    position-anchor: --help;
    position-area: left;
    position-try-fallbacks: --to-right;
    background: gold; padding: 4px 8px;
  }
</style>
 
<button class="btn">?</button>
<div class="help">Shown on the right: no room on the left</div>

Примечания

Запасные варианты перебираются по порядку и только тогда, когда основное положение не помещается. Сокращённое свойство position-try принимает ещё и position-try-order (например, most-height выбирает вариант, где больше всего места). Внутри @position-try разрешены только свойства положения, размеров и внешних отступов. Поддерживается в Chrome и Edge с 2024 года и в Safari 26.

См. также

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

В учебнике

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

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