position-try-fallbacks

/* Default value: no try fallback options */
position-try-fallbacks: none;

/* Single try option */
position-try-fallbacks: flip-block;
position-try-fallbacks: top;
position-try-fallbacks: --custom-try-option;

/* Multiple value combination option */
position-try-fallbacks: flip-block flip-inline;

/* Multiple values */
position-try-fallbacks: flip-block, flip-inline;
position-try-fallbacks: top, right, bottom;
position-try-fallbacks: --custom-try-option1, --custom-try-option2;
position-try-fallbacks:
  flip-block,
  flip-inline,
  flip-block flip-inline;
position-try-fallbacks:
  flip-block,
  --custom-try-option,
  --custom-try-option flip-inline,
  right;

/* Global values */
position-try-fallbacks: inherit;
position-try-fallbacks: initial;
position-try-fallbacks: revert;
position-try-fallbacks: revert-layer;
position-try-fallbacks: unset;

Свойство position-try-fallbacks может быть указано как ключевое значение none или как список, разделённый запятыми, одного или нескольких пространственно разделённых имен пользовательских опций позиционирования или <try-tactic> или position-area значение.

none

Значение по умолчанию. Не установлено никаких вариантов обратного вызова позиционирования.

<try-tactic>

Предопределённые варианты обратного вызова перемещают позиционированный элемент, беря его вычисленное положение и преобразовывая его по определённой оси якоря, отображая любые отступы полей. Возможные значения:

flip-block

Переворачивает позицию элемента по оси блока.

flip-inline

Переворачивает позицию элемента по оси встроеных элементов.

flip-start

Переворачивает значения по оси встроеных и блоков, меняя местами свойства start друг с другом и свойства end друг с другом.

position-area значение

Позиционирует элемент относительно границ связанного с ним элемента-якоря, размещая позиционированный элемент на одной или нескольких плит неявной сетки 3x3 области позиционирования на основе указанного значения <position-area>; эффект аналогичен пользовательскому варианту обратного вызова @position-try, содержащему только дескриптор position-area.

<dashed-ident>

Добавляет пользовательский вариант обратного вызова @position-try в список вариантов обратного вызова, идентификационное имя которого соответствует указанному dashed-ident. Если такой вариант обратного вызова не существует, опция игнорируется.

Элементы, позиционированные относительно якоря, всегда должны отображаться в удобном для пользователя месте, если это возможно, независимо от того, где находится их якорь. Чтобы предотвратить выход позиционированного элемента за пределы области просмотра, часто необходимо изменить его расположение, когда якорь приближается к краю своего контейнера или области просмотра.

Это достигается путем предоставления одного или нескольких вариантов обратного вызова позиционирования в свойстве position-try-fallbacks. Если начальное положение позиционированного элемента выходит за пределы области, браузер попробует каждое значение обратного вызова; первое значение обратного вызова, которое не приводит к выходу элемента за пределы его блока размещения, используется. По умолчанию браузер будет пробовать их в порядке их появления в списке, применяя первый найденный, который предотвратит выход позиционированного элемента за пределы области.

Если ни один вариант не может разместить позиционированный элемент полностью на экране, браузер вернётся к отображению позиционированного элемента в его исходном положении до применения любых вариантов обратного вызова.

Для получения подробной информации об элементах-якорях и использовании вариантов обратного вызова позиционирования см. страницу раздела позиционирование якорей CSS и руководство Обработка переполнения: обратные вызовы позиционирования и условное скрытие.

Упомянутые в спецификации как <try-tactic>, предопределённые значения перемещают позиционированный элемент, беря его вычисленное положение и преобразуя его по определённой оси якоря. Предопределённые значения:

flip-block

Переворачивает позицию элемента по оси блока таким образом, чтобы он находился на таком же расстоянии от якоря, но на противоположной стороне. Другими словами, он отражает положение элемента относительно оси встроеных элементов, проходящей через центр якоря. Например, если позиционированный элемент начал выходить за пределы сверху якоря, это значение перевернёт его положение вниз.

flip-inline

Переворачивает позицию элемента по оси встроеных элементов таким образом, чтобы он находился на таком же расстоянии от якоря, но на противоположной стороне. Другими словами, он отражает положение элемента относительно оси блоков, проходящей через центр якоря. Например, если позиционированный элемент начал выходить за пределы слева от якоря, это значение перевернёт его положение вправо.

flip-start

Отражает положение элемента относительно оси, проходящей по диагонали через центр якоря, проходящей через точку пересечения начала оси блока и начала оси встроеных элементов, и точку пересечения конца оси блока и конца оси встроеных элементов. Например, если позиционированный элемент начал выходить за пределы слева от якоря, это значение перевернёт позиционированный элемент вверх.

Один вариант обратного вызова позиционирования может включать более чем одну <try-tactic> или dashed-ident опции, или их комбинацию, объявив их как одну пространственно разделённую опцию:

• В случае нескольких предопределённых <try-tactic> вариантов их преобразования составляются вместе.
• В случае объявления предопределённого <try-tactic> и <dashed-ident> с именем @position-try опция, пользовательская позиционная опция применяется первой, затем применяется преобразование <try-tactic>.

position-area значения нельзя объединять таким образом.

position-try-fallbacks = 
  none                                                |
  [ [ <dashed-ident> || <try-tactic> ] | <'position-area'> ]#  

<try-tactic> = 
  flip-block   ||
  flip-inline  ||
  flip-start   

<position-area> = 
  none             |
  <position-area>  

<position-area> = 
  [ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | x-self-start | x-self-end | span-x-self-start | span-x-self-end | span-all ] || [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | y-self-start | y-self-end | span-y-self-start | span-y-self-end | span-all ]  |
  [ block-start | center | block-end | span-block-start | span-block-end | span-all ] || [ inline-start | center | inline-end | span-inline-start | span-inline-end | span-all ]  |
  [ self-block-start | center | self-block-end | span-self-block-start | span-self-block-end | span-all ] || [ self-inline-start | center | self-inline-end | span-self-inline-start | span-self-inline-end | span-all ]  |
  [ start | center | end | span-start | span-end | span-all ]{1,2}  |
  [ self-start | center | self-end | span-self-start | span-self-end | span-all ]{1,2}  

В этом примере показано базовое использование нескольких предопределённых <try-tactic> вариантов падения по умолчанию.

HTML

HTML включает два элемента <div>, которые станут якорем и элементом, позиционированным относительно якоря:

<div class="anchor">⚓︎</div>

<div class="infobox">
  <p>This is an information box.</p>
</div>

CSS

Мы задаём стили элементу <body> , чтобы он был очень большим, что позволит прокручивать его как по горизонтали, так и по вертикали.

Якорю задаётся anchor-name и большие отступы, чтобы разместить его где-то около центра видимой области <body>:

body {
  width: 1500px;
  height: 500px;
}

.anchor {
  anchor-name: --myAnchor;
  margin: 100px 350px;
}

Элементу информационной панели задаётся фиксированное позиционирование, свойство position-anchor, которое ссылается на anchor-name якоря, чтобы связать их, а также привязка к верхнему левому углу якоря с помощью position-area.

Мы включаем маркированный список position-try-fallbacks (и повторно объявляем его с помощью position-try сокращения, на случай, если краткая запись свойства ещё не поддерживается), предоставляя два предопределённых варианта падения по умолчанию для предотвращения переполнения, когда якорь оказывается близко к краю области просмотра, переключая его по оси вставки или блоку якоря.

.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  position-area: top left;

  position-try-fallbacks: flip-block, flip-inline;
  position-try: flip-block, flip-inline;
}

Результат

Это даёт нам следующий результат:

Попробуйте прокрутить, чтобы якорь приблизился к краям:

• Если вы переместите якорь близко к верхней части области просмотра, вы увидите, как позиционированный элемент переместится в нижний левый угол якоря, чтобы избежать переполнения.
• Если вы переместите якорь близко к левой стороне области просмотра, вы увидите, как позиционированный элемент переместится в верхний правый угол якоря, чтобы избежать переполнения.

Однако, если вы переместите якорь в верхний левый угол области просмотра, вы заметите проблему — поскольку позиционированный элемент начинает переполнять область в блоке и по оси вставки, он возвращается в стандартное положение в верхнем левом углу и переполняет в обоих направлениях, чего мы не хотим.

Это происходит потому, что мы предоставили браузеру только варианты позиционирования flip-block или flip-inline. Мы не дали ему возможность попробовать оба варианта одновременно. Следующий пример покажет, как исправить эту проблему.

Давайте используем объединённый вариант падения по умолчанию, чтобы исправить проблему, обнаруженную в предыдущей демонстрации.

HTML и CSS

Весь HTML и CSS в этой демонстрации остаются неизменными, за исключением кода позиционируемого элемента. В этом случае ему задаётся третий вариант падения по умолчанию: flip-block flip-inline:

.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  position-area: top left;

  position-try:
    flip-block,
    flip-inline,
    flip-block flip-inline;
  position-try-fallbacks:
    flip-block,
    flip-inline,
    flip-block flip-inline;
}

Результат

Третий вариант падения по умолчанию означает, что браузер попробует flip-block и flip-inline для предотвращения переполнения, а если эти варианты падения по умолчанию не сработают, он объединит их, одновременно перемещая позицию элемента по блоку и оси вставки. Теперь, когда вы прокручиваете якорь к верхним и левым краям области просмотра, позиционированный элемент переместится в нижний правый угол.

В этом примере показаны некоторые position-area варианты падения по умолчанию позиционирования.

HTML и CSS

Весь HTML и CSS в этой демонстрации остаются неизменными, за исключением кода позиционируемого элемента. В этом случае наши варианты падения по умолчанию — это все значения position-area — top, top right, right, bottom right, bottom, bottom left, и left.

Это означает, что позиционированный элемент найдёт подходящую позицию для отображения независимо от того, какие края области просмотра находится рядом с якорем. Этот подход немного более громоздкий, чем использование предопределённых значений, но он также более подробный и гибкий.

.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  position-area: top left;

  position-try:
    top, top right, right,
    bottom right, bottom,
    bottom left, left;

  position-try-fallbacks:
    top, top right, right,
    bottom right, bottom,
    bottom left, left;
}

Результат

Прокрутите страницу и посмотрите, как эти варианты падения по умолчанию позиционирования влияют на отображение, когда якорь приближается к краю области просмотра.

См. страницу справки @position-try.

• position-try
• position-try-order
• @position-try правило
• position-area
• <position-area> значение
• Обработка переполнения: варианты падения по умолчанию и условное скрытие руководство
• Использование позиционирования CSS якоря руководство
• Модуль позиционирования CSS якоря