<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 | 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}
]

Области позиционирования работают на основе концепции position-area grid, 3x3 сетки ячеек, составленной из четырёх линий сетки, две на каждой оси, с элементом-якорем, являющимся центральной ячейкой:

При использовании в качестве значения свойства 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. Установка значения 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 y-self-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: x-self-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: center center */
position-area: start; /* equiv: start start */
position-area: end; /* equiv: end end */

Разные типы ключевых слов, которые можно использовать:

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

Физические ключевые слова сетки указывают на ячейку или область сетки 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.

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

Другое значение по умолчанию равно center. Например, span-left эквивалентно center span-left, а center эквивалентно center center.

Логические ключевые слова сетки указывают на область сетки position area, используя логические значения. С этими значениями положение и направление зависят от настроек 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

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

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

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

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

x-self-start

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

x-self-end

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

center

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

Ключевые слова оси y включают:

y-start

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

y-end

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

y-self-start

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

y-self-end

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

center

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

Например, x-end y-start и x-self-end y-self-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-центр и x-конец. При установке writing-mode: horizontal-tb, область позиции сетки будет охватывать ячейки сетки в нижнем центре и внизу справа, а при установке writing-mode: vertical-rl — в нижнем центре и внизу слева.

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

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

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

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

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

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

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

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

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