CSS-свойство `position-area`

Свойство position-area CSS позволяет позиционировать элемент с привязкой к якорю относительно краёв связанного с ним элемента-якоря, размещая позиционируемый элемент в одной или нескольких ячейках неявной сетки 3×3, где элемент-якорь находится в центральной ячейке.

position-area — удобная альтернатива привязке и позиционированию элемента относительно его якоря с помощью внутренних отступов и функции anchor(). Концепция на основе сетки решает распространённую задачу позиционирования краёв содержащего блока позиционируемого элемента относительно краёв его якоря по умолчанию.

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

Синтаксис

/* Default value */
position-area: none;

/* Two <position-area> keywords defining a single specific tile */
position-area: top left;
position-area: start end;
position-area: block-start center;
position-area: inline-start block-end;
position-area: x-start y-end;
position-area: center self-y-end;

/* Two <position-area> keywords spanning two tiles */
position-area: top span-left;
position-area: center span-start;
position-area: inline-start span-block-end;
position-area: y-start span-x-end;

/* Two <position-area> keywords spanning three tiles */
position-area: top span-all;
position-area: block-end span-all;
position-area: self-x-start span-all;

/* One <position-area> keyword with an implicit second <position-area> keyword  */
position-area: top; /* equiv: top span-all */
position-area: inline-start; /* equiv: inline-start span-all */
position-area: center; /* equiv: center center */
position-area: span-all; /* equiv: span-all span-all */
position-area: end; /* equiv: end end */

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

Значения

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

<position-area>

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

none

Область позиционирования не задана.

Описание

Свойство position-area — альтернатива функции anchor() для позиционирования элементов относительно якорей. position-area основано на концепции сетки 3×3, состоящей из ячеек и называемой сеткой 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 свойства самовыравнивания

Значение 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 для позиционирования всплывающих окон

При использовании position-area для позиционирования всплывающих окон имейте в виду, что стили всплывающих окон по умолчанию могут конфликтовать с желаемым способом позиционирования. Обычно проблема связана со стилями по умолчанию для margin и inset, поэтому рекомендуется сбросить эти стили:

.my-popover {
  margin: 0;
  inset: auto;
}

Рабочая группа CSS ищет способы избежать необходимости в этом обходном решении.

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

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

position-area = 
  none |
  <position-area>

Примеры

Базовый пример

В этом примере позиционируемый элемент привязан к связанному с ним якорю и позиционируется относительно него с помощью свойства position-area.

HTML

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

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

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

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

CSS

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

В качестве начального значения position-area мы задаём top center. Это значение указано для селектора p, поэтому оно обладает меньшей специфичностью, чем любое значение, добавленное в селектор класса <style> блока .positionedElement. Поэтому начальное значение 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;
}

Результаты

Попробуйте изменить объём текста в элементе с привязкой к якорю и посмотрите, как он увеличивается. Также попробуйте задать свойству position-area другое значение, например center.

Сравнение значений 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>

<form id="position-area-form">
  <div>
    <label for="position-area-select">Choose a position-area:</label>
    <select id="position-area-select" name="position-area-select">
      <optgroup label="Enter custom value">
        <option>Custom</option>
      </optgroup>
      <optgroup label="Physical, single tile">
        <option selected>top left</option>
        <option>bottom right</option>
      </optgroup>
      <optgroup label="Physical, span two">
        <option>bottom span-right</option>
        <option>left span-top</option>
      </optgroup>
      <optgroup label="Physical, span all">
        <option>top</option>
        <option>left</option>
      </optgroup>
      <optgroup label="Logical, single tile">
        <option>start center</option>
        <option>inline-start block-end</option>
      </optgroup>
      <optgroup label="Logical, span two">
        <option>start span-end</option>
        <option>center span-start</option>
        <option>inline-start span-block-end</option>
        <option>span-block-start center</option>
      </optgroup>
      <optgroup label="Logical, span all">
        <option>start span-all</option>
        <option>block-end</option>
      </optgroup>
      <optgroup label="Coordinates, single tile">
        <option>x-start center</option>
        <option>x-end y-end</option>
      </optgroup>
      <optgroup label="Coordinates, span two">
        <option>center span-y-start</option>
        <option>y-start span-x-end</option>
      </optgroup>
      <optgroup label="Coordinates, span all">
        <option>x-start span-all</option>
        <option>y-end</option>
      </optgroup>
    </select>
  </div>
  <div id="position-area-custom-container">
    <label for="position-area-custom">Enter a custom position-area:</label
    ><br />
    <input type="text" id="position-area-custom" name="position-area-custom" />
  </div>
</form>

<form id="writing-mode-form">
  <label for="writing-mode-checkbox">writing-mode: vertical-lr</label><br />
  <input
    type="checkbox"
    id="writing-mode-checkbox"
    name="writing-mode-checkbox" />
</form>

CSS

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

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

.anchor {
  font-size: 1.8rem;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  min-width: 50px;
  min-height: 50px;
  line-height: 50px;
  border-radius: 10px;
  border: 1px solid black;
  padding: 3px;
}

html {
  height: 100%;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

form {
  background: white;
  border: 1px solid black;
  padding: 5px;
  position: fixed;
}

#position-area-form {
  top: 0;
  right: 2px;
}

#position-area-form div:last-child {
  margin-top: 10px;
}

#position-area-form div :last-child {
  margin-top: 5px;
}

#writing-mode-form {
  bottom: 0;
  left: 2px;
  writing-mode: horizontal-tb;
}

#position-area-custom-container {
  display: none;
}

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

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

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

const anchorContainer = document.querySelector("body");
const infobox = document.querySelector(".infobox");

const positionAreaForm = document.querySelector("#position-area-form");
const selectElem = document.querySelector("select");
const inputElemContainer = document.querySelector(
  "#position-area-custom-container",
);
const inputElem = document.querySelector("#position-area-custom");
const checkboxElem = document.querySelector("#writing-mode-checkbox");

// Stop form from submitting when enter is pressed on it
positionAreaForm.addEventListener("submit", (e) => {
  e.preventDefault();
});

// Update positioned element position-area to value selected in drop-down
selectElem.addEventListener("change", () => {
  const area = selectElem.value;

  if (area === "Custom") {
    // Show the custom value input field
    inputElemContainer.style.display = "block";
  } else {
    // Hide the custom value input field
    inputElemContainer.style.display = "none";
    // Set the position-area to the value chosen in the select box
    infobox.style.positionArea = area;
  }
});

// Update positioned element position-area to entered custom value
inputElem.addEventListener("change", () => {
  const customArea = inputElem.value;

  // Set the position-area to the value in the input box
  infobox.style.positionArea = customArea;
});

// Change writing-mode to match checkbox setting
checkboxElem.addEventListener("change", () => {
  if (checkboxElem.checked) {
    anchorContainer.style.writingMode = "vertical-lr";
  } else {
    anchorContainer.style.writingMode = "horizontal-tb";
  }
});

Результат

Результат выглядит следующим образом:

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

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

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

См. также

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