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

position-try — CSS-свойство, являющееся сокращённой записью для свойств position-try-order и position-try-fallbacks.

Составные свойства

Это свойство является сокращённой записью для следующих свойств CSS:

• position-try-order
• position-try-fallbacks

Синтаксис

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

/* position-try-order and position-try-fallbacks */
position-try: normal none;
position-try:
  most-width --custom-try-option1,
  --custom-try-option2;
position-try:
  most-height flip-block,
  right,
  --custom-try-option;

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

Значения

Это свойство задаётся одним или обоими из следующих значений:

position-try-order Необязательно

Ключевое слово, задающее порядок приоритета вариантов резервного позиционирования. Если не указано, по умолчанию используется normal.

position-try-fallbacks

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

Описание

Сокращённое свойство position-try позволяет задать свойства position-try-order и position-try-fallbacks в одном объявлении. Оно задаёт position-try-order и position-try-fallbacks именно в таком порядке. Если компонент position-try-order не указан, по умолчанию используется normal.

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

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

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

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

position-try = 
  <'position-try-order'>? <'position-try-fallbacks'>

Примеры

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

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

HTML

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

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

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

CSS

В CSS якорю задаётся имя anchor-name, а для его свойства position устанавливается значение absolute. Мы размещаем его в верхней половине области просмотра с помощью значений top и left:

.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;
  position: absolute;
  top: 100px;
  left: 45%;
}

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

form {
  position: fixed;
  bottom: 2px;
  right: 2px;
}

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

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

Изначально мы размещаем элемент над его якорем, а затем задаём ему значение position-try, которое устанавливает для него position-try-order равное most-height, и список position-try-fallbacks, содержащий только наш пользовательский вариант резервного позиционирования:

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

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

  position-try: most-height --custom-bottom;
}

Результат

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

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

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

См. также

• position-area
• position-try-fallbacks
• position-try-order
• At-правило @position-try
• Значение <position-area>
• Позиционирование с якорями в CSS — модуль
• Использование позиционирования с якорями в CSS — руководство
• Резервные варианты и условное скрытие при переполнении — руководство