CSS Anchor Positioning: границы layout и overlay

BotBrowser может повторить разрешённый fixture CSS anchor positioning в объявленном профиле, но не может добавить anchor-name, position-anchor или position-try в движок без их реализации. Практический вопрос состоит в том, остаётся ли overlay привязанным к anchor, выбирает ли объявленный резервный вариант и остаётся ли читаемым, когда предок обрезает или прокручивает содержимое. Это отдельная задача компоновки и overflow, а не поведение фокуса и закрытия из статьи Popover API: фокус и доступность.

TL;DR

• Задайте цели стабильный anchor-name, затем подключите позиционируемый элемент через position-anchor.
• Поместите варианты в position-try; браузер проверит их при переполнении предпочитаемой позиции.
• Считайте position-try-order и position-try-fallbacks ограниченным списком, а не гарантией для любого окна.
• Отдельно проверьте scroll-контейнер и overflow clip: доступная область может быть разной.
• Сохраняйте вычисленные стили, выбранный резервный вариант и снимок на каждой границе; одной проверки свойства недостаточно.

Содержание

• Модель anchor
• Минимальный fixture overlay
• Резервный вариант: алгоритм выбора
• Overflow и scroll-контейнеры
• Воспроизводимая матрица границ
• Граница возможностей BotBrowser
• Заключение

Модель anchor

Anchor positioning связывает две коробки. Anchor публикует имя в дереве компоновки, а позиционируемый subject обращается к нему. anchor() читает край или размер anchor, а position-area выбирает логическую область вокруг него. Спецификация CSSWG описывает модель и алгоритм резервного варианта; совместимость зависит от реализации браузера, поэтому обычная CSS-альтернатива должна оставаться в тех же правилах.

Объявление	Назначение	Что проверить
anchor-name: --trigger	Публикует именованный anchor	Имя стоит на элементе, который меняет размер или положение
position-anchor: --trigger	Выбирает anchor subject	Идентификатор разрешается в subject
position-try: --below, --above	Перечисляет варианты	Браузер может выбрать подходящий вариант

Класс, где указан только position-anchor, не сработает, если anchor-name находится на sibling за пределами containing block. Имя также не создаёт stacking context и связь фокуса. Для измерения visual viewport используйте материал о свойствах экрана и viewport.

Минимальный fixture overlay

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

<div class="toolbar">
  <button id="help" class="trigger">Help</button>
  <div class="tip" role="tooltip">Keyboard shortcuts</div>
</div>

.toolbar {
  position: relative;
}
.trigger {
  anchor-name: --help-trigger;
}
.tip {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-start: 0;
  inline-size: 14rem;
  max-inline-size: min(14rem, 90vw);
  position-anchor: --help-trigger;
  position-try: --above, --inline-end;
}
@position-try --above {
  inset-block-end: anchor(top);
  inset-block-start: auto;
}
@position-try --inline-end {
  inset-block-start: anchor(top);
  inset-inline-start: anchor(right);
  inset-inline-end: auto;
}

Отступы альтернативы являются обычным CSS, поэтому старый движок поставит tooltip под toolbar. В поддерживающем движке position-anchor делает относительные значения активными. Блоки @position-try являются кандидатами, которые user agent проверяет по порядку, а не JavaScript callbacks. Синтаксис и таблица совместимости есть в справке MDN для anchor-name.

Используйте локальный fixture с фиксированным inline-size, видимым outline и короткой подписью. После загрузки шрифтов снимите getComputedStyle(tip).positionAnchor и getBoundingClientRect() обеих коробок.

Резервный вариант: алгоритм выбора

Предпочитаемая позиция задаётся обычными объявлениями. Браузер проверяет, помещается ли прямоугольник в containing block с inset-модификаторами. При переполнении проверяются варианты из position-try или position-try-fallbacks. Кандидат может менять inset, выравнивание или размер, но не смысл компонента.

Делайте варианты узкими: --above двигает subject только вверх, --inline-end направляет его в сторону. Тогда снимок объясняет достигнутую границу. В статье Chrome про Anchor Positioning API показаны модель “попробовать затем следующий” и position-try-order, выбирающий вариант с большим запасом.

Порядок виден в результате. При position-try-order: most-width боковой вариант может выиграть, даже если --above записан первым. Если важен порядок чтения, объявите его и протестируйте. Сохраняйте viewport, прямоугольники и выбранный вариант в JSON:

{
  "viewport": "390x844",
  "anchor": { "top": 734, "bottom": 770, "left": 16, "right": 104 },
  "subject": { "top": 610, "bottom": 704, "left": 16, "right": 240 },
  "selected": "--above",
  "overflow": { "blockEnd": 0, "inlineEnd": 0 }
}

Числа являются примером проверяемого результата, а не универсальным порогом. Для --above сохраняйте условие subject.bottom <= anchor.top; наличие свойства в computed style не доказывает, что subject не обрезан и не закрывает trigger.

Overflow и scroll-контейнеры

Scroll container и overflow clip задают разные вопросы. Первый меняет видимые пиксели при прокрутке, второй запрещает рисование за пределами padding box. Разделите wrappers:

.scroll-frame {
  block-size: 12rem;
  overflow: auto;
  border: 1px solid currentColor;
}
.clip-frame {
  overflow: clip;
  contain: paint;
}

Поместите anchor у нижнего края .scroll-frame, прокрутите до границы и откройте overlay. Запишите, следует ли subject за anchor и обрезает ли его frame. Повторите внутри .clip-frame. Прямоугольник может помещаться в viewport, но быть невидимым из-за clip предка, поэтому нужны и снимок, и геометрический журнал.

Transforms, contain: layout и вложенные positioned ancestors создают дополнительные containing blocks. Меняйте только одного предка за раз. Если subject прыгает к viewport, сначала найдите элемент, создающий containing block; большой z-index не проходит через clip.

Воспроизводимая матрица границ

Запускайте одну страницу с новым профилем для каждой строки, сохраняя build, zoom, загрузку шрифтов и device scale factor.

Строка	Изменение	Ожидаемое наблюдение	Смысл
A	Anchor в центре, просторный viewport	Предпочтительная позиция видна	Базовая связь
B	Anchor у конца блока	Выбран --above или другой вариант	Проверка варианта
C	Anchor внутри scroll wrapper	Subject следует после scroll	Scroll containment
D	Предок с overflow: clip	Прямоугольник есть, пиксели могут быть обрезаны	Граница рисования
E	Движок без функции	Появляется absolute-альтернатива	Совместимость

Храните версию, viewport, масштаб, scroll offsets, вычисленный positionAnchor и оба прямоугольника. Формулировка “строка D обрезана в .clip-frame” полезнее, чем “anchor positioning сломан”. При отличии E оставьте резервный вариант читабельным и укажите на таблицу совместимости.

Граница возможностей BotBrowser

BotBrowser может зафиксировать профиль, viewport, zoom и launch policy для разрешённого fixture, повторить матрицу и сохранить обезличенную геометрию и снимки. Он не добавляет отсутствующее CSS-свойство, не проходит через clip предка и не гарантирует одинаковый резервный вариант во всех версиях. Результат описывает конкретные движок, build, профиль и viewport.

Не используйте положение anchor как оценку личности. Изменение окна, zoom, шрифтов или accessibility может выбрать другой вариант. Для общей методики совместимости смотрите тесты web-платформы для уверенности в функциях.

FAQ

Заменяет ли position-anchor JavaScript-позиционирование?

Для отношений, которые выражаются CSS, он может заменить цикл измерения и записи стилей. JavaScript всё ещё может управлять состоянием, фокусом или собственной политикой столкновений. Оставьте резервный вариант для неподдерживающих движков.

Почему резервный вариант помещается в viewport, но невидим?

Предок может создать clipping padding box через overflow: clip, contain: paint или scroll viewport. Прямоугольник валиден, но пиксели не могут выйти за предка. Сначала проверьте цепочку, затем меняйте z-index.

Гарантирует ли резервный вариант, что overlay не накроет anchor?

Нет. Выбор ограничен containing block и объявленными кандидатами. Маленький viewport, крупный текст или длинный перевод могут оставить без полностью подходящего варианта. Задайте читаемый максимум и явное закрытие.

Заключение

Anchor positioning это CSS-связь и ограниченный список резервных вариантов. Назовите движущийся элемент, укажите position-anchor, задайте небольшие кандидаты через position-try и проверьте границу, scroll container и overflow clip. Храните прямоугольники вместе со снимками, чтобы отличить выбор варианта от clipping. BotBrowser повторяет контролируемое наблюдение, но не превращает ограничение браузера в гарантию.

Публичные источники

• CSS Anchor Positioning Module Level 1 (CSSWG)
• MDN: anchor-name
• MDN: position-anchor
• MDN: position-try
• Chrome for Developers: Anchor Positioning API