Свойство CSS `position-try-order`

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

Синтаксис

/* Keywords */
position-try-order: normal;
position-try-order: most-height;
position-try-order: most-width;
position-try-order: most-block-size;
position-try-order: most-inline-size;

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

Значения

Свойству position-try-order можно задать ключевое слово normal или значение типа <try-size>.

normal

Значение по умолчанию. При первоначальном отображении элемента не проверяются резервные параметры position-try.

<try-size>

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

most-height

Применяет резервный параметр position-try, который предоставляет элементу наибольшее пространство по вертикали.

most-width

Применяет резервный параметр position-try, который предоставляет элементу наибольшее пространство по горизонтали.

most-block-size

Применяет резервный параметр position-try, который предоставляет элементу наибольшее пространство в блочном направлении.

most-inline-size

Применяет резервный параметр position-try, который предоставляет элементу наибольшее пространство во встроенном направлении.

Описание

Свойство position-try-order отличается от остальных возможностей position-try тем, что влияет на выбор применяемого резервного параметра position-try при первом отображении позиционируемого элемента, а не во время прокрутки. Например, может потребоваться изначально отобразить элемент в области, где доступно больше места по высоте или ширине, чем в исходной позиции.

Браузер проверяет доступные position-try-fallbacks, чтобы определить, какой из них предоставляет элементу, позиционируемому относительно якоря, больше всего места в заданном направлении. Затем он применяет этот параметр, переопределяя исходные стили элемента при первой отрисовке страницы.

Если ни один резервный параметр position-try не предоставляет больше места по ширине или высоте, чем исходное позиционирование элемента, параметр position-try не будет применён — так же, как если бы для position-try-order было задано значение normal.

Подробные сведения о возможностях якорного позиционирования и использовании параметров position-try см. в модуле якорного позиционирования CSS и руководстве «Резервные параметры и условное скрытие при переполнении».

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

Формальное определение

Формальный синтаксис

position-try-order = 
  normal |
  <try-size>

<try-size> = 
  most-width |
  most-height |
  most-block-size |
  most-inline-size

Примеры

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

В этом примере показан эффект свойства position-try-order.

HTML

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

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

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

CSS

В CSS сначала зададим элементу, позиционируемому относительно якоря, значение normal свойства position-try-order, чтобы его было легче найти, когда позже потребуется изменить его:

.infobox {
  position-try-order: normal;
}

Якорю задаются anchor-name и большое значение margin, чтобы расположить его ближе к центру области просмотра:

.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: 90px auto;
}

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

Добавим пользовательский параметр позиции с именем --custom-bottom, который расположит элемент, позиционируемый относительно якоря, под якорем и задаст ему подходящий внешний отступ:

@position-try --custom-bottom {
  top: anchor(bottom);
  bottom: unset;
  margin-top: 10px;
}

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

.infobox {
  position: fixed;
  position-anchor: --my-anchor;

  bottom: anchor(top);
  margin-bottom: 10px;
  justify-self: anchor-center;

  position-try-fallbacks: --custom-bottom;
}

Результат

Изначально элемент, позиционируемый относительно якоря, расположен над якорем — это заданная нами позиция по умолчанию.

Теперь откройте пример в MDN Playground, нажав кнопку Запустить, запустите пример, а затем измените position-try-order на most-height или most-block-size. После повторной отрисовки примера элемент, позиционируемый относительно якоря, будет расположен под якорем: применяется резервный параметр --custom-bottom, поскольку он предоставляет позиционируемому элементу больше окружающего пространства по высоте, чем позиция по умолчанию.

Спецификации

Совместимость с браузерами

См. также

• position-try
• position-try-fallbacks
• Правило at-rule @position-try
• Модуль якорного позиционирования CSS
• Руководство «Использование якорного позиционирования CSS»
• Руководство «Резервные параметры и условное скрытие при переполнении»