Свойство CSS `position-visibility`

Свойство position-visibility CSS позволяет условно скрывать элемент, позиционируемый относительно якоря, например, если он выходит за пределы содержащего его элемента или области просмотра.

Синтаксис

/* Single values */
position-visibility: always;
position-visibility: anchors-valid;
position-visibility: anchors-visible;
position-visibility: no-overflow;

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

Значения

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

always

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

anchors-valid

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

anchors-visible

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

no-overflow

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

Описание

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

Свойство position-visibility можно использовать, чтобы always показывать элемент, позиционируемый относительно якоря, или условно скрывать его в определённых ситуациях:

• anchors-visible: связанный якорный элемент полностью скрыт.
• anchors-valid: свойство position-anchor элемента, позиционируемого относительно якоря, не ссылается на допустимое значение anchor-name, заданное для якорного элемента в том же документе.
• no-overflow: элемент, позиционируемый относительно якоря, скрыт частично или полностью.

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

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

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

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

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

Примеры

Базовое использование

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

HTML

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

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Dui nunc mattis enim ut tellus
  elementum sagittis vitae et.
</p>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque.
</p>

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

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

<p>
  Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
  cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
  aliquam.
</p>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
  Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
  accumsan.
</p>

<form>
  <fieldset>
    <legend>Choose position visibility</legend>
    <div>
      <label for="radio-always">always</label>
      <input
        type="radio"
        id="radio-always"
        name="position-visibility"
        value="always"
        checked />
    </div>
    <div>
      <label for="radio-anchors-visible">anchors-visible</label>
      <input
        type="radio"
        id="radio-anchors-visible"
        name="position-visibility"
        value="anchors-visible" />
    </div>
    <div>
      <label for="radio-no-overflow">no-overflow</label>
      <input
        type="radio"
        id="radio-no-overflow"
        name="position-visibility"
        value="no-overflow" />
    </div>
  </fieldset>
</form>

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

CSS

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

body {
  width: 50%;
  margin: 0 auto;
}

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

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

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

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

.infobox {
  position-anchor: --my-anchor;
  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
• Руководство Резервные варианты и условное скрытие при переполнении