position-visibility

always

Элемент с позиционированием всегда отображается.

anchors-visible

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

no-overflow

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

Спецификация также определяет значение anchors-valid, которое пока не реализовано ни в одном браузере.

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

Свойство position-visibility может быть использовано для always отображения элемента, позиционированного относительно якоря, или условно скрыть его, если связанный элемент-якорь полностью скрыт (anchors-visible) или если сам позиционированный элемент частично скрыт (no-overflow).

Когда элемент скрывается из-за position-visibility, он называется сильно скрытым. Это означает, что он будет вести себя так, как будто у него и его дочерних элементов значение visibility равно hidden, независимо от фактического значения видимости.

position-visibility следует использовать только в ситуациях, когда предпочтительнее скрыть позиционированный элемент полностью. В большинстве случаев имеет больше смысла попытаться изменить расположение позиционированных элементов, когда они начинают выходить за пределы области просмотра, чтобы они оставались на экране и были доступны. Это можно сделать с помощью свойства position-try-fallbacks и at-правила @position-try. Дополнительную информацию можно найти в руководстве Обработка переполнения: попытки возврата и условное скрытие.

position-visibility = 
  always                                              |
  [ anchors-valid || anchors-visible || no-overflow ]  

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

HTML

Мы указываем два <div> элемента; элемент якоря с классом anchor и позиционированный элемент с классом infobox.

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

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

HTML также содержит заполняющий текст, чтобы содержимое было выше области просмотра, поэтому требуется прокрутка. Мы также включили <fieldset> с группой радиокнопок с различными значениями position-visibility. Для краткости разметка этих элементов не показана.

CSS

Мы стилизуем anchor <div> как элемент якоря и привязываем infobox <div> к нему. Соответствующий CSS приведён ниже:

.anchor {
  anchor-name: --myAnchor;
}

.infobox {
  position-anchor: --myAnchor;
  position: fixed;
  position-area: top span-all;
  margin-bottom: 5px;
  position-visibility: always;
}

JavaScript

Мы включаем обработчик события change на радиокнопках, чтобы при выборе нового значения мы обновляли значение свойства position-visibility информационного блока.

const infobox = document.querySelector(".infobox");
const radios = document.querySelectorAll('[name="position-visibility"]');

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

function setPositionVisibility(e) {
  infobox.style.positionVisibility = e.target.value;
}

Результат

Выберите различные значения position-visibility и прокрутите страницу вверх и вниз, чтобы увидеть их влияние. При значении position-visibility: always позиционированный элемент не будет скрываться. При значении position-visibility: anchors-visible позиционированный элемент будет виден только тогда, когда якорь частично или полностью находится на экране. При значении position-visibility: no-overflow позиционированный элемент будет скрываться, как только он начнёт выходить за пределы области просмотра.

• anchor-name
• position-anchor
• position
• position-area
• Модуль CSS позиционирования относительно якорей
• Руководство по использованию CSS позиционирования относительно якорей
• Руководство по обработке переполнения: попытки возврата и условное скрытие