CSS-свойство `position-try-fallbacks`

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

Синтаксис

/* 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 или список значений, разделённых запятыми:

none

Значение по умолчанию. Резервные варианты позиционирования не заданы.

<try-tactic>

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

flip-block

Отражает позицию элемента вдоль блочной оси.

flip-inline

Отражает позицию элемента вдоль строчной оси.

flip-start

Отражает значения строчной и блочной осей, меняя местами свойства start и свойства end.

position-area value

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

<dashed-ident>

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

Описание

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

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

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

Свойство position-try-fallbacks, как и свойство position-try-order, можно также задать с помощью сокращённого свойства position-try.

Подробные сведения о возможностях привязки к якорю и использовании резервных вариантов позиционирования см. в модуле Позиционирование относительно якоря в CSS и руководстве Резервные варианты и условное скрытие при переполнении.

Предопределённые значения <try-tactic>

В спецификации эти значения называются <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

Примеры

Основы использования

В этом примере показано базовое использование пары предопределённых резервных вариантов <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>:

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

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

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

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

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

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

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

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

Результат

В результате получаем следующее:

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

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

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

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

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

Объединение нескольких значений в один вариант

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

HTML и CSS

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

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

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

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

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

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

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

.infobox {
  position: fixed;
  position-anchor: --my-anchor;
  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

В этом примере показано, как работают некоторые резервные варианты позиционирования position-area.

HTML и CSS

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

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

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

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

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

.anchor {
  font-size: 1.8rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  width: fit-content;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

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

.infobox {
  color: darkblue;
  background-color: azure;
  border: 1px solid #dddddd;
  padding: 10px;
  border-radius: 10px;
  font-size: 1rem;
}

.infobox {
  position: fixed;
  position-anchor: --my-anchor;
  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 директива at-rule
• position-area
• <position-area> значение
• Резервные варианты и условное скрытие содержимого при переполнении руководство
• Использование CSS-позиционирования относительно якоря руководство
• CSS-позиционирование относительно якоря модуль