Обработка переполнения: попытка подбора вариантов и условное скрытие

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

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

Это руководство объясняет, как использовать механизмы позиционирования CSS якорей для управления этими проблемами — **варианты подбора позиции по умолчанию** и **условное скрытие**. Варианты подбора позиции по умолчанию предоставляют альтернативные позиции для браузера, чтобы попытаться разместить позиционированные элементы, предотвращая их переполнение, чтобы они оставались на экране. Условное скрытие позволяет указать условия, при которых якорь или позиционированный элемент будут скрыты.

Примечание: Сведения о базовых принципах позиционирования CSS якорей см. в Использовании позиционирования CSS якорей.

Обзор функций

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

Варианты подбора позиции по умолчанию можно указать с помощью:

Предопределенные варианты подбора.
position-area значения.
Настраиваемые варианты, определенные с помощью правила @position-try.

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

Сокращённое свойство position-try можно использовать для указания position-try-order и position-try-fallbacks значений в одном объявлении.

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

Предопределенные варианты подбора

Значения предопределённых вариантов подбора position-try-fallbacks свойства (определённые как <try-tactic> в спецификации) «переворачивают» положение элемента, позиционированного по якорю, по одной или обеим осям, если элемент в противном случае переполнит область.

Элемент может быть перевёрнут по оси блока (flip-block), по оси строки (flip-inline) или по диагонали по воображаемой линии, проведённой от угла якоря через его центр к противоположному углу (flip-start). Эти три значения переворачивают элемент, отображая его положение на противоположной стороне для первых двух значений и смежной стороны для flip-start. Например, если элемент, позиционированный 10px над его якорем, начинает переполнять верхнюю часть якоря, значение flip-block повернёт позиционированный элемент на 10px ниже его якоря.

В этом примере мы включаем два <div> элемента. Первый будет нашим элементом-якорем, а второй — позиционированным относительно якоря:

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

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

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

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

Для наглядности мы абсолютно позиционируем якорь, чтобы он отображался около центра первоначального <body> отображения:

Элемент, позиционированный по якорю, получает фиксированное позиционирование и привязан к верхнему левому углу якоря с помощью position-area. Ему задано position-try-fallbacks: flip-block, flip-inline; для обеспечения некоторых вариантов подбора позиции, чтобы предотвратить переполнение позиционированного элемента, когда якорь приближается к краю области просмотра.

.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  position-area: top left;
  position-try-fallbacks: flip-block, flip-inline;
}

Примечание: Когда указано несколько вариантов подбора позиции, они разделяются запятыми и применяются в указанном порядке.

Попробуйте прокрутить демонстрацию, чтобы якорь начал приближаться к краям:

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

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

Это происходит потому, что мы предоставили браузеру только варианты позиционирования flip-block или flip-inline. Мы не предоставили ему возможность попробовать оба одновременно. Браузер перебирает варианты подбора, ища один, который размещает позиционированный элемент полностью внутри области просмотра или содержащего блока. Если он не находит такой вариант, он отображает позиционированный элемент в его первоначально определённом положении без применения вариантов подбора позиции.

В следующем разделе показано, как исправить эту проблему.

Объединение нескольких значений в один вариант

Возможна комбинация нескольких предопределённых вариантов подбора или настраиваемых вариантов подбора в одно значение варианта подбора, разделённое пробелами, внутри перечисления position-try-fallbacks значений, разделённых запятыми. При попытке применить эти варианты подбора браузер объединит отдельные эффекты в один комбинированный вариант подбора.

Давайте используем объединённый вариант подбора для исправления проблемы, обнаруженной в предыдущей демонстрации. HTML и CSS в этой демонстрации такие же, за исключением стилей позиционирования инфобокса. В этом случае ему задан третий вариант подбора позиции: flip-block flip-inline:

.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  position-area: top left;
  position-try-fallbacks:
    flip-block,
    flip-inline,
    flip-block flip-inline;
}

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

END_OF_DOCUMENT_MARKER

Использование опций подстановки по умолчанию `position-area`

Предопределённые <try-tactic> опции подстановки по умолчанию полезны, но ограничены, так как они позволяют только изменять расположение позиционируемого элемента по осям. А что, если у вас есть элемент с привязкой к якорю, расположенный в левом верхнем углу относительно якоря, и вам нужно изменить его расположение непосредственно под якорём, если он начинает выходить за пределы видимой области?

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

В следующем примере показаны position-area опции подстановки по умолчанию для позиционирования. Мы используем тот же HTML и CSS, за исключением позиционирования инфоблока. В этом случае наши опции подстановки по умолчанию — значения position-area — top, top-right, right, bottom-right, bottom, bottom-left и left. Позиционируемый элемент будет размещён разумно, независимо от того, к какому краю экрана приближается якорь. Этот подробный подход более гранулированный и гибкий, чем подход с предопределёнными значениями.

.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  position-area: top left;
  position-try-fallbacks:
    top, top right, right,
    bottom right, bottom,
    bottom left, left;
}

Примечание: Вы не можете добавлять position-area опции подстановки по умолчанию в комбинированную опцию позиционирования через пробелы в списке опций подстановки по умолчанию для позиционирования.

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

Пользовательские опции подстановки

Чтобы использовать пользовательские опции подстановки по умолчанию, которые недоступны с помощью вышеупомянутых механизмов, вы можете создать свои собственные с помощью директивы @position-try. Синтаксис:

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

--try-fallback-name — это определяемое разработчиком имя опции подстановки по умолчанию для позиционирования. Это имя можно указать в списке опций подстановки по умолчанию, разделённом запятыми, в значении свойства position-try-fallbacks. Если несколько директивов @position-try имеют одно и то же имя, последнее в порядке документации переопределяет другие. Избегайте использования одного и того же имени для ваших опций подстановки по умолчанию и для имен ваших якорей или настраиваемых свойств; это не делает директиву недействительной, но это значительно усложнит понимание вашего CSS.

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

position-area
Свойства отступов
Свойства отступов (например, margin-left, margin-block-start)
Свойства выравнивания (например, position-anchor)
Свойства размера (width, block-size и т. д.)
position-anchor

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

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

Мы начинаем с определения четырёх пользовательских опций подстановки по умолчанию с помощью @position-try:

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

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

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

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

После создания наших пользовательских опций подстановки по умолчанию мы можем включить их в список позиционирования, указав их имена:

.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 игнорируются. Также обратите внимание, что инфоблок имеет фиксированную ширину и нижний отступ. Эти значения изменятся при применении различных опций подстановки по умолчанию для позиционирования.

Если инфоблок начинает выходить за пределы экрана, браузер пытается использовать позиции, перечисленные в свойстве position-try-fallbacks:

Браузер сначала пытается использовать позицию подстановки --custom-left. Это перемещает инфоблок влево от якоря, изменяет отступ в соответствии с этим, а также придаёт инфоблоку другую ширину.
Затем браузер пытается использовать позицию --custom-bottom. Это перемещает инфоблок вниз от якоря и устанавливает соответствующий отступ. В нём нет описателя width, поэтому инфоблок возвращается к его ширине по умолчанию 200px, заданной свойством width.
Затем браузер пытается использовать позицию --custom-right. Это работает примерно так же, как позиция --custom-left, с тем же значением описателя width, но значения position-area и margin зеркально отображаются для правильного размещения инфоблока справа.
Если ни одна из других подстановок не удерживает позиционируемый элемент от выхода за пределы видимой области, браузер в качестве последнего средства пробует позицию --custom-bottom-right. Это работает примерно так же, как и другие опции подстановки по умолчанию, но размещает позиционируемый элемент в правом нижнем углу якоря.

Если ни одна из подстановок не удерживает позиционируемый элемент от выхода за пределы видимой области, позиция возвращается к начальному значению position-area: top;.

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

Использование `position-try-order`

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

Это свойство позволяет вам указать, что вы хотите, чтобы позиционируемый элемент первоначально отображался с помощью опции подстановки по умолчанию для позиционирования, которая предоставляет содержащему блоку наибольшую ширину или высоту. Это достигается установкой значений most-height, most-width, most-block-size, или most-inline-size. Вы также можете удалить влияние ранее установленных значений position-try-order с помощью значения normal.

Если доступна какая-либо опция подстановки по умолчанию для позиционирования, обеспечивающая большую ширину/высоту, чем начальное позиционирование, заданное элементу, position-try-order не имеет никакого эффекта.

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

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

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

Мы первоначально позиционируем инфоблок в верхней части якоря, а затем применяем нашу пользовательскую опцию подстановки по умолчанию:

.infobox {
  position: fixed;
  position-anchor: --myAnchor;
  bottom: anchor(top);
  margin-bottom: 10px;
  justify-self: anchor-center;
  position-try-fallbacks: --custom-bottom;
}

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

const infobox = document.querySelector(".infobox");
const radios = document.querySelectorAll('[name="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, которая размещает элемент под якорём. Это происходит потому, что ниже якоря больше места, чем над ним.

END_OF_DOCUMENT_MARKER

Условное скрытие элементов с привязкой к якорю

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

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

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

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

Давайте посмотрим, как это свойство работает на практике.

В этом примере используется тот же HTML и CSS, что и в предыдущих примерах, с информационной вкладкой, привязанной к нижнему краю якоря. Информационная вкладка получает значение position-visibility: no-overflow; для её полного скрытия, когда она прокручивается вверх до точки, где она начинает выходить за пределы области просмотра.

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

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

См. также

© 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/CSS_anchor_positioning/Try_options_hiding