position-area

Значение свойства — два <position-area> ключевых слова или ключевое слово none. Если указано только одно <position-area> ключевое слово, второе подразумевается.

<position-area>

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

none

Область position-area не задана.

Свойство position-area предоставляет альтернативу функции anchor() для позиционирования элементов относительно якорей. position-area работает на основе концепции 3x3 сетки ячеек, называемой сеткой позиционирования position-area, где якоревый элемент является центральной ячейкой:

Ячейки сетки разделены на строки и столбцы:

• Три строки представлены физическими значениями физических значений top, center, и bottom. Они также имеют логические эквиваленты, такие как block-start, center, и block-end, и координатные эквиваленты — y-start, center, и y-end.
• Три столбца представлены физическими значениями left, center, и right. Они также имеют логические эквиваленты, такие как inline-start, center, и inline-end, и координатные эквиваленты — x-start, center, и x-end.

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

Значение <position-area> состоит из одного или двух ключевых слов, которые определяют область сетки, внутри которой должен быть размещён позиционируемый элемент. То есть, содержащий блок позиционируемого элемента устанавливается в область сетки.

Например:

• Можно указать значение строки и столбца, чтобы разместить позиционируемый элемент в одной определённой ячейке сетки — например, top left (логический эквивалент start start) или bottom center (логический эквивалент end center) разместят позиционируемый элемент в правом верхнем или нижнем центральном квадрате.
• Можно указать значение строки или столбца плюс значение span-* для охвата двух или трёх ячеек. Первое значение определяет строку или столбец для размещения позиционируемого элемента, первоначально размещая его в центре, а второе — другие ячейки этой строки или столбца, которые нужно охватить. Например:
  • top span-left помещает позиционируемый элемент в центр верхней строки и охватывает центральную и левую ячейки этой строки.
  • block-end span-inline-end помещает позиционируемый элемент в центр правой строки и охватывает центральную и правую ячейки этой строки.
  • bottom span-all и y-end span-all помещают позиционируемый элемент в центр нижней строки и охватывают все три ячейки (левую, центральную и правую) этой строки.

Подробную информацию о функциях якоря, использовании и свойстве position-area см. на странице модуля позиционирования по якорям CSS и в руководстве Использование позиционирования по якорям CSS, особенно в разделе установка position-area.

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

Свойство выравнивания normal значение

Значение свойства выравнивания, включая align-items, align-self, justify-items и justify-self, ведёт себя как start, end, или anchor-center. Значение, к которому выравнивание по умолчанию свойства сводится, зависит от позиционирования элемента:

• Если значение position-area указывает на центральную область в оси, выравнивание по умолчанию вдоль этой оси — anchor-center.
• В противном случае поведение противоположно области, указанной свойством position-area Например, если значение position-area указывает начальную область своей оси, выравнивание по умолчанию вдоль этой оси — end.

Например, если writing-mode установлено в horizontal-tb, position-area: top span-x-start помещает позиционируемый элемент в центр верхней строки и охватывает центральную и начальную ячейки этой строки. В этом случае свойства выравнивания по умолчанию будут align-self: end и justify-self: anchor-center.

Свойства и значения вставки

Когда якоревый элемент позиционируется с помощью свойства position-area , любые свойства вставки, такие как top или inset-inline-end, задают смещения от области position-area. Некоторые другие значения свойств, такие как max-block-size: 100%, также будут относительными к области position-area. Любые свойства вставки, установленные или имеющие значение по умолчанию auto , будут вести себя так, как будто их значение установлено в 0.

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

Если позиционируемый элемент размещён в одной ячейке (верхний центр, нижний центр или центр), его размер по блоку будет таким же, как размер содержащего блока якоря, увеличиваясь вверх, вниз или в обе стороны соответственно. Позиционируемый элемент будет выровнен с заданной ячейкой сетки, но примет такую же ширину, как якоревый элемент. Однако он не позволит своему содержимому выходить за пределы — его минимальный width будет его min-content (как определено шириной самого длинного слова).

Если позиционируемый элемент помещён в любую другую ячейку сетки (например, с position-area: top left) или должен охватить две или более ячеек (например, с помощью position-area: bottom span-all), он будет выровнен с заданной областью сетки, но будет вести себя так, как будто у него установлена ширина width max-content . Его размер определяется размером содержащего блока, который накладывается на него при установке position: fixed. Он будет растягиваться до ширины текстового содержимого, хотя может также быть ограничен краем <body>.

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-area.

HTML

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

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

<p class="positionedElement" contenteditable="true">This can be edited.</p>

<style contenteditable="true">.positionedElement {
    position-area: CHANGEME;
  }
</style>

CSS

Мы преобразуем <div> в элемент якоря с помощью свойства anchor-name. Затем мы связываем абсолютно позиционируемый <p> с ним, установив значение его свойства position-anchor на то же имя якоря.

Мы устанавливаем начальное значение position-area в top center. Это значение задаётся для селектора p, поэтому значение имеет меньшую специфичность, чем любое значение, добавленное в блок стилей <style> через селектор класса класса. В результате, вы можете переопределить начальное значение position-area , установив значение position-area внутри блока стилей.

.anchor {
  anchor-name: --infobox;
  background: palegoldenrod;
  font-size: 3em;
  width: fit-content;
  border: 1px solid goldenrod;
  margin: 100px auto;
}

p {
  position: absolute;
  position-anchor: --infobox;
  position-area: top center;
  margin: 0;
  background-color: darkkhaki;
  border: 1px solid darkolivegreen;
}

style {
  display: block;
  white-space: pre;
  font-family: monospace;
  background-color: #ededed;
  -webkit-user-modify: read-write-plaintext-only;
  line-height: 1.5;
  padding: 10px;
}

Результаты

Попробуйте изменить количество текста в элементе, позиционированном относительно якоря, чтобы увидеть, как он увеличивается. Также попробуйте изменить недопустимое значение «CHANGEME» свойства position-area на допустимое значение.

Этот демонстрационный пример создаёт якорь и привязывает позиционируемый элемент к нему. Он также предоставляет раскрывающееся меню, позволяющее вам выбирать различные значения position-area для применения к позиционируемому элементу, чтобы увидеть их эффект. Один из вариантов вызывает появление текстового поля, позволяющего ввести пользовательское значение. Наконец, предоставляется флажок для включения/выключения writing-mode: vertical-lr, что позволяет наблюдать, как различаются эффекты значения position-area в различных режимах письма.

HTML

В HTML мы задаём два элемента <div>, один с классом anchor, а другой — с классом infobox. Они предназначены для элемента якоря и позиционируемого элемента, которые мы соответственно свяжем с ним. Мы включили атрибут contenteditable для обоих, сделав их напрямую редактируемыми.

Мы также включили два формы, содержащие элементы <select> и <input type="text"> для задания различных значений position-area, и элемент <input type="checkbox"> для переключения вертикального режима writing-mode включение/выключение. Код для них, наряду с JavaScript, скрыт для краткости.

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

<div class="infobox">
  <p contenteditable>You can edit this text.</p>
</div>

CSS

В CSS мы сначала объявляем anchor <div> как элемент якоря, установив имя якоря с помощью свойства anchor-name.

Позиционируемый элемент связывается с элементом якоря путём установки имени якоря в качестве значения свойства позиционируемого элемента position-anchor. Мы также даём ему начальную позицию с position-area: top left; это будет переопределено при выборе новых значений из меню <select>. Наконец, мы устанавливаем его opacity в 0.8, чтобы при задании позиционируемому элементу значения position-area, помещающего его поверх якоря, вы всё ещё могли видеть положение элементов относительно друг друга.

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

.infobox {
  position-anchor: --myAnchor;
  position: fixed;
  opacity: 0.8;
  position-area: top left;
}

Результат

Результат следующий:

Попробуйте выбрать новые значения position-area из меню <select>, чтобы увидеть их влияние на положение информационной панели. Выберите значение «Пользовательский» и попробуйте ввести некоторые пользовательские значения position-area в поле ввода, чтобы увидеть их влияние. Добавьте текст в элементы якоря и позиционированного относительно якоря, чтобы увидеть, как элемент, позиционированный относительно якоря, увеличивается в зависимости от значения position-area. Наконец, установите флажок, а затем экспериментируйте с различными значениями position-area , чтобы увидеть, какие из них дают одинаковый результат в различных режимах написания, а какие — разные.

• anchor-name
• position-anchor
• position-try-fallbacks
• Функция anchor()
• Значение <position-area>
• Руководство по использованию позиционирования с помощью CSS-якорей
• Обработка переполнения: попытка использовать обходные пути и условное скрытие руководство
• Модуль позиционирования с помощью CSS-якорей