@position-try

Ограниченное использование

Эта функция не является базовой, так как она не работает во всех широко используемых браузерах.

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

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

Каждый вариант позиционирования называется с помощью <dashed-ident> и содержит список описаний, определяющих информацию, такую как положение вставки, отступы, размеры и самовыравнивание. <dashed-ident> используется для ссылки на пользовательский вариант позиционирования в свойстве position-try-fallbacks и сокращенном свойстве position-try.

Подробную информацию об особенностях якоря и использовании отката позиционирования см. на странице модуля позиционирование с помощью CSS-якорей и руководстве Обработка переполнения: откат позиционирования и условное скрытие.

Синтаксис

@position-try --try-option-name {
  descriptor-list
}

Примечание: --try-option-name — это <dashed-ident>, определяющий идентификатор для пользовательского варианта позиционирования, который затем можно использовать для добавления этого варианта отката в список position-try-fallbacks.

Описание

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

position-anchor

Указывает значение свойства position-anchor, которое определяет элемент якоря, к которому привязан позиционированный элемент, указав значение <dashed-ident>, равное значению свойства anchor-name элемента якоря.

position-area

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

Свойства вставки

Указывают значения функций anchor(), которые определяют положение краёв элемента, позиционированного по якорю, относительно края элемента якоря. Свойства вставки могут быть установлены для следующих свойств:

Описание свойств отступов

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

Описание свойств размеров

Указывают значения функций anchor-size(), которые определяют размер элемента, позиционированного по якорю, относительно размера элемента якоря. Свойства размеров могут быть установлены для следующих свойств:

Описание свойств самовыравнивания

Устанавливают значение anchor-center для выравнивания элемента, позиционированного по якорю, относительно центра элемента якоря по блочной или линейной оси. Свойства align-self и justify-self могут принимать значение anchor-center.

Примечание: Когда к элементу применяется пользовательский вариант позиционирования, значения свойств, определённые в @position-try правиле, имеют приоритет над значениями, установлёнными для элемента через стандартные CSS свойства.

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

@position-try = 
  @position-try <dashed-ident> { <declaration-list> }

Примеры

Использование опций пользовательского позиционирования

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

HTML

Мы включаем два <div> элемента, которые будут элементом якоря и элементом, позиционируемым относительно якоря:

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

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

CSS

Сначала мы стилизуем элемент <body> так, чтобы он был очень большим, чтобы мы могли прокручивать элемент якоря и позиционируемый элемент в области просмотра как по горизонтали, так и по вертикали:

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

Якорю задаётся anchor-name и значение position absolute. Затем мы позиционируем его где-то около центра начального <body> рендеринга, используя значения top и left:

.anchor {
  anchor-name: --myAnchor;
  position: absolute;
  top: 100px;
  left: 350px;
}

Далее, мы используем директиву @position-try для определения четырёх пользовательских опций позиционирования, с описательными <dashed-ident> именами для их идентификации и описания назначения. Каждая из них размещает позиционируемый элемент в определённом положении вокруг элемента якоря и задаёт соответствующий 10px отступ между позиционируемым элементом и его якорём. Позиционирование осуществляется различными способами, чтобы продемонстрировать различные доступные техники:

Первая и последняя опции позиционирования используют position-area.
Вторая опция позиционирования использует top со значением anchor() и justify-self: anchor-center для центрирования позиционируемого элемента по якорю в направлении строки.
Третья опция позиционирования использует left со значением anchor(), заключённым в функцию calc(), которая добавляет 10px отступа (вместо создания отступа с помощью margin, как это делают другие опции). Затем она использует align-self: anchor-center для центрирования позиционируемого элемента по якорю в направлении блока.

Наконец, опциям позиционирования слева и справа задаётся более узкая width.

@position-try --custom-left {
  position-area: left;
  width: 100px;
  margin: 0 10px 0 0;
}

@position-try --custom-bottom {
  top: anchor(bottom);
  justify-self: anchor-center;
  margin: 10px 0 0 0;
  position-area: none;
}

@position-try --custom-right {
  left: calc(anchor(right) + 10px);
  align-self: anchor-center;
  width: 100px;
  position-area: none;
}

@position-try --custom-bottom-right {
  position-area: bottom right;
  margin: 10px 0 0 10px;
}

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

.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  position-area: top;
  width: 200px;
  margin: 0 0 10px 0;
  position-try-fallbacks:
    --custom-left, --custom-bottom,
    --custom-right, --custom-bottom-right;
}

Результат

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

Давайте обсудим, как работают эти опции позиционирования:

Прежде всего, обратите внимание, что наша позиция по умолчанию определяется position-area: top. Когда информационная вкладка не выходит за пределы страницы ни в каком направлении, она находится над якорем, и опции подстановки позиций, заданные в свойстве position-try-fallbacks, игнорируются. Также обратите внимание, что у информационной вкладки заданы фиксированная ширина и нижний отступ. Эти значения изменятся при применении различных опций подстановки позиций.
Если информационная вкладка начинает выходить за пределы страницы, браузер сначала пробует позицию --custom-left. Это перемещает информационную вкладку влево от якоря с помощью position-area: left, регулирует отступ соответственно и также задаёт информационной вкладке другую ширину.
Далее браузер пробует позицию --custom-bottom. Это перемещает информационную вкладку вниз к якорю с помощью top и justify-self вместо position-area, и задаёт соответствующий отступ. Она не включает описатель width, поэтому информационная вкладка возвращается к своей ширине по умолчанию 200px, заданной свойством width.
Затем браузер пробует позицию --custom-right. Это работает почти так же, как позиция --custom-left, с применением того же значения описателя width. Однако мы используем left и align-self для размещения позиционируемого элемента вместо position-area. И мы заключаем значение left в функцию calc(), внутри которой мы добавляем 10px для создания отступа, вместо использования margin.
Если ни одна из других опций подстановки позиций не удаётся предотвратить выход позиционируемого элемента за пределы страницы, браузер пробует позицию --custom-bottom-right в качестве последнего средства. Это размещает позиционируемый элемент в правом нижнем углу якоря с помощью position-area: bottom right.

При применении опции позиционирования её значения переопределяют начальные значения, заданные для позиционируемого элемента. Например, width изначально заданное для позиционируемого элемента, равно 200px, но когда применена опция позиции --custom-right, её ширина устанавливается в 100px.

В некоторых случаях нам нужно задавать значения внутри пользовательских опций позиционирования, чтобы отключить начальные значения. Опции --custom-bottom и --custom-right используют свойство inset и значения *-self: anchor-center для размещения позиционируемого элемента, поэтому мы удаляем ранее заданное значение position-area в каждом случае, устанавливая position-area: none. Если мы этого не сделаем, изначально заданное значение position-area: top всё ещё будет действовать и повлияет на другие данные позиционирования.

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

Спецификация
CSS позиционирование якорей # at-ruledef-position-try

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`@position-try`	125	125	Нет	111	Нет	125	Нет	83	Нет	27.0	125

См. также

position-area
position-anchor
position-try-fallbacks
position-try
Функция anchor()
Функция anchor-size()
Модуль CSS позиционирования якорей
Руководство по использованию CSS позиционирования якорей
Обработка переполнения: подстановка позиций и условное скрытие руководство
CSSPositionTryRule

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@position-try