position-try

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

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

См. position-try-order и position-try-fallbacks для описания значений.

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

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

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

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

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

<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}  

Этот пример демонстрирует эффект 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 {
  anchor-name: --myAnchor;
  position: absolute;
  top: 100px;
  left: 45%;
}

Затем мы включаем пользовательский вариант позиционирования — --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: --myAnchor;

  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
• Правило @position-try
• Значение <position-area>
• Модуль CSS позиционирования якорей
• Руководство по использованию CSS позиционирования якорей
• Обработка переполнения: варианты обратной совместимости и условное скрытие