Тип CSS `<position-area>`

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

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

Синтаксис

<position-area> = [
  [ left | center | right | span-left | span-right | x-start | x-end | span-x-start | span-x-end | self-x-start | self-x-end | span-self-x-start | span-self-x-end | span-all ]
||
  [ top | center | bottom | span-top | span-bottom | y-start | y-end | span-y-start | span-y-end | self-y-start | self-y-end | span-self-y-start | span-self-y-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 | self-block-end | span-self-block-start | span-self-block-end | span-all ]
||
  [ self-inline-start | 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}
]

Описание

Области позиционирования основаны на понятии сетки области позиционирования — сетки 3×3 из ячеек, образованной четырьмя линиями сетки (по две на каждой оси), где элемент-якорь занимает центральную ячейку:

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

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

• Три строки обозначаются физическими значениями 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> содержат одно или два ключевых слова, задающих определённую область сетки области позиционирования. Если задать значение position-area для позиционированного элемента, его содержащий блок будет помещён в указанную область сетки:

/* Examples: Two keywords to place the element in a single specific tile */
position-area: top left;
position-area: bottom right;
position-area: start end;
position-area: center end;
position-area: block-start center;
position-area: inline-start block-end;
position-area: x-start y-end;
position-area: center self-y-end;

/* Examples: Two keywords to span the element across two tiles */
position-area: top span-left;
position-area: span-bottom right;
position-area: center span-start;
position-area: inline-start span-block-end;
position-area: y-start span-x-end;

/* Examples: Two keywords to span the element across three tiles */
position-area: top span-all;
position-area: block-end span-all;
position-area: self-x-start span-all;

/* Examples: One keyword with an implicit second 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: start; /* equiv: start start */
position-area: end; /* equiv: end end */

Можно использовать следующие типы ключевых слов:

• Физические ключевые слова сетки
• Общие логические ключевые слова для строк и столбцов
• Явные логические ключевые слова для строчного и блочного направлений
• Координатные ключевые слова сетки

Физические ключевые слова сетки

Физические ключевые слова сетки задают ячейку или область сетки position-area с помощью физических значений. На эти значения не влияют настройки writing-mode или direction.

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

• top, center или bottom: верхняя, центральная или нижняя строка сетки.
• left, center или right: левый, центральный или правый столбец сетки.

Например, top left выбирает верхнюю левую ячейку, а center right — центральную ячейку правого столбца.

Физические ключевые слова для охвата сетки

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

span-left

Охватывает центральный и левый столбцы сетки.

span-right

Охватывает центральный и правый столбцы сетки.

span-top

Охватывает центральную и верхнюю строки сетки.

span-bottom

Охватывает центральную и нижнюю строки сетки.

span-all

Допустимо со всеми типами ключевых слов; охватывает указанную ячейку и соседние ячейки в той же строке или столбце. См. раздел span-all ниже.

Например, top span-left охватывает верхнюю центральную и верхнюю левую ячейки сетки.

Значения физических ключевых слов сетки по умолчанию

Если в значении position-area указано только одно физическое ключевое слово, второе значение подразумевается следующим образом:

left, right, top или bottom

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

span-left, span-right, span-top или span-bottom

Второе значение по умолчанию — span-all. Например, span-left эквивалентно span-left span-all.

center или span-all

Второе значение по умолчанию совпадает с первым. Например, center эквивалентно center center, а span-all эквивалентно span-all span-all.

Логические ключевые слова сетки

Логические ключевые слова сетки задают область сетки области позиционирования с помощью логических значений. При использовании этих значений на положение и направление влияют настройки writing-mode и direction содержащего блока элемента или, в случае ключевых слов self, самого позиционированного элемента. Существует два типа логических ключевых слов: общие и явные.

Общие логические ключевые слова для строк и столбцов

В общих логических ключевых словах используются одинаковые термины для строчного и блочного направлений; направление определяется положением ключевого термина в паре значений <position-area>. Первое значение задаёт положение в блочном направлении, а второе — в строчном. Можно указать один или два ключевых термина из следующего списка. Если указать два термина из этого списка, будет выбрана одна определённая ячейка сетки. Положение или направление, задаваемое ключевым словом:

start

Начало блочного или строчного направления сетки, рассчитанное на основе режима письма содержащего блока.

end

Конец блочного или строчного направления сетки, рассчитанный на основе режима письма содержащего блока.

self-start

Начало блочного или строчного направления сетки, рассчитанное на основе собственного режима письма элемента.

self-end

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

center

Центр блочного направления сетки (если это ключевое слово указано первым) или строчного направления (если оно указано вторым).

Например, start end и self-start self-end задают положение в начале блочного направления и в конце строчного направления. Если задано writing-mode: horizontal-tb, это будет верхняя правая часть элемента-якоря, а если задано writing-mode: vertical-rl — нижняя правая часть якоря.

Общие логические ключевые слова для охвата строк и столбцов

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

span-start

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

span-end

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

span-self-start

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

span-self-end

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

Например, start span-end и self-start span-self-end задают область сетки позиционирования, которая начинается в центре начальной строки блочного направления и охватывает ячейки этой строки, расположенные в центральном и конечном столбцах строчного направления. Если задано writing-mode: horizontal-tb, это охватит верхнюю центральную и верхнюю правую ячейки якоря, а если задано writing-mode: vertical-rl — охватит правую центральную и нижнюю правую ячейки элемента.

Явные логические ключевые слова для строчного и блочного направлений

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

block-start

Начало блочного направления сетки, рассчитанное на основе режима письма содержащего блока.

block-end

Конец блочного направления сетки, рассчитанный на основе режима письма содержащего блока.

inline-start

Начало строчного направления сетки, рассчитанное на основе режима письма содержащего блока.

inline-end

Конец строчного направления сетки, рассчитанный на основе режима письма содержащего блока.

Например, block-start inline-end задаёт ячейку в начале блочного направления и в конце строчного направления. Если задано writing-mode: horizontal-tb, это будет ячейка в верхней правой части якоря, а если задано writing-mode: vertical-rl — ячейка в нижней правой части.

Явные логические ключевые слова для охвата в строчном и блочном направлениях

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

span-block-start

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

span-block-end

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

span-inline-start

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

span-inline-end

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

Например, block-end span-inline-start выбирает центральную ячейку конечной блочной строки и охватывает ячейки этой строки, расположенные в центральном и начальном строчных столбцах. Если задано writing-mode: horizontal-tb, это охватит нижнюю центральную и нижнюю левую ячейки сетки, а если задано writing-mode: vertical-rl — левую центральную и верхнюю левую ячейки.

Значения логических ключевых слов сетки по умолчанию

Если указано только одно логическое ключевое слово <position-area>, второе значение подразумевается следующим образом:

start, end, self-start или self-end

Второе значение по умолчанию совпадает с первым; выбирается ячейка сетки в начальной строке и столбце либо в конечной строке и столбце.

span-start, span-self-start, span-end, span-self-end

Второе значение по умолчанию совпадает с первым. Например, span-start эквивалентно span-start span-start.

block-start, block-end, inline-start, inline-end

Второе значение по умолчанию — span-all; оно охватывает все три ячейки выбранного столбца или строки. Например, block-start эквивалентно block-start span-all.

span-block-start, span-block-end, span-inline-start, span-inline-end

Второе значение по умолчанию — span-all. Например, span-inline-start эквивалентно span-inline-start span-all.

Координатные ключевые слова сетки

Эти ключевые слова задают ячейки сетки position-area с помощью координат x и y. На её положение и направление влияют настройки writing-mode и/или direction содержащего блока элемента или, в случае ключевых слов self, самого элемента.

Однако ячейки сетки определяются относительно физических осей, а не блочного и строчного направлений:

• Для writing-mode: horizontal-tb и vertical-lr ось x проходит слева направо, а ось y — сверху вниз.
• Для writing-mode: horizontal-tb; direction: rtl и writing-mode: vertical-rl ось x проходит справа налево, а ось y — сверху вниз.

С помощью координатных ключевых слов строк и столбцов можно указать по одному ключевому слову для оси x и оси y, чтобы задать одну определённую ячейку сетки.

Ключевые слова для оси x:

x-start

Начальная ячейка вдоль оси x сетки, рассчитанная на основе режима письма содержащего блока.

x-end

Конечная ячейка вдоль оси x сетки, рассчитанная на основе режима письма содержащего блока.

self-x-start

Начальная ячейка вдоль оси x сетки, рассчитанная на основе собственного режима письма элемента.

self-x-end

Конечная ячейка вдоль оси x сетки, рассчитанная на основе собственного режима письма элемента.

center

Центр оси x сетки, рассчитанный на основе собственного режима письма элемента.

Ключевые слова для оси y:

y-start

Начальная ячейка вдоль оси y сетки, рассчитанная на основе режима письма содержащего блока.

y-end

Конечная ячейка вдоль оси y сетки, рассчитанная на основе режима письма содержащего блока.

self-y-start

Начальная ячейка вдоль оси y сетки, рассчитанная на основе собственного режима письма элемента.

self-y-end

Конечная ячейка вдоль оси y сетки, рассчитанная на основе собственного режима письма элемента.

center

Центр оси y сетки, рассчитанный на основе собственного режима письма элемента.

Например, x-end y-start и self-x-end self-y-start выбирают ячейку сетки в конце оси x и в начале оси y. Если задано writing-mode: horizontal-tb, это будет ячейка в верхней правой части якоря, а если задано writing-mode: vertical-rl — ячейка в верхней левой части.

Координатные ключевые слова для охвата

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

span-x-start

Охватывает центральную ячейку и ячейку в начале оси x указанной строки оси y.

span-x-end

Охватывает центральную ячейку и ячейку в конце оси x указанной строки оси y.

span-y-start

Охватывает центральную ячейку и ячейку в начале оси y указанного столбца оси x.

span-y-end

Охватывает центральную ячейку и ячейку в конце оси y указанного столбца оси x.

Например, y-end span-x-end выбирает ячейку в центре конечной строки оси y и охватывает ячейки этой строки, расположенные в центральном и конечном столбцах оси x. Если задано writing-mode: horizontal-tb, область сетки позиционирования охватит нижнюю центральную и нижнюю правую ячейки сетки, а если задано writing-mode: vertical-rl — нижнюю центральную и нижнюю левую ячейки.

Значения координатных ключевых слов сетки по умолчанию

Если указано только одно координатное ключевое слово <position-area> сетки, второе значение подразумевается следующим образом:

x-start, self-x-start, x-end, self-x-end, y-start, self-y-start, y-end или self-y-end

Второе значение по умолчанию — span-all; выбираются ячейки сетки, охватывающие все три ячейки столбца или строки, в которой элемент изначально был размещён. Например, x-start эквивалентно x-start span-all.

span-x-start, span-x-end, span-y-start, span-y-end, span-self-x-start, span-self-x-end, span-self-y-end или span-self-y-start

Второе значение по умолчанию — span-all. Например, span-x-start эквивалентно span-x-start span-all.

span-all

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

Примеры

См. страницу свойства position-area.

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

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

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

См. также

• position-area
• anchor-name
• position-anchor
• anchor() функция
• Руководство по использованию позиционирования CSS-якорей
• Руководство по вариантам резервного размещения и условному скрытию при переполнении
• Модуль позиционирования CSS-якорей