position-try-order

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

normal

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

<try-size>

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

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 не доступен, который предоставляет большую ширину/высоту, чем начальное позиционирование, назначенное элементу, ни один вариант position try не будет применён. По сути, поведение будет таким, как если бы position-try-order было установлено на normal.

Для получения подробной информации об элементах якоря и использовании вариантов позиционирования по якорю, см. страницу с описанием модуля CSS позиционирования по якорю и руководство Обработка переполнения: варианты обратного вызова 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> элемента, которые будут якорем и элементом с позиционированием по якорю, и <form> содержащий радиокнопки, позволяющие выбрать различные значения position-try-order.

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

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

<form>
  <fieldset>
    <legend>Choose a try order</legend>
    <div>
      <label for="radio-normal">normal</label>
      <input
        type="radio"
        id="radio-normal"
        name="position-try-order"
        value="normal"
        checked />
    </div>
    <div>
      <label for="radio-most-height">most-height</label>
      <input
        type="radio"
        id="radio-most-height"
        name="position-try-order"
        value="most-height" />
    </div>
  </fieldset>
</form>

CSS

В CSS якорю задаётся anchor-name и большая margin, чтобы расположить его в верхней центральной части области просмотра:

.anchor {
  anchor-name: --myAnchor;
  margin: 90px auto;
}

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

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

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

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

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

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

JavaScript

Наконец, мы включаем JavaScript. Он устанавливает обработчик события change для радиокнопок, чтобы при выборе нового значения это значение применялось к свойству position-try-order инфобокса.

const infobox = document.querySelector(".infobox");
const form = document.forms[0];
const radios = form.elements["position-try-order"];

for (const radio of radios) {
  radio.addEventListener("change", setTryOrder);
}

function setTryOrder(e) {
  const tryOrder = e.target.value;
  infobox.style.positionTryOrder = tryOrder;
}

Результат

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

• position-try
• position-try-fallbacks
• Правило @position-try
• Модуль позиционирования якорей CSS
• Руководство по использованию позиционирования якорей CSS
• Обработка переполнения: обратные варианты и условное скрытие руководство