Posicionamiento anchor CSS: límites de layout y overlays

BotBrowser puede repetir un fixture autorizado de posicionamiento anchor CSS con un perfil declarado, pero no puede implementar anchor-name, position-anchor ni position-try en un motor que no los soporte. La pregunta útil es si el overlay sigue a su ancla, elige una alternativa declarada y continúa siendo legible cuando un ancestro recorta o desplaza. Es un contrato de layout y overflow, separado del foco y el cierre que trata Popover API: foco y accesibilidad.

TL;DR

• Asigna un anchor-name estable al objetivo y conecta el elemento posicionado con position-anchor.
• Declara alternativas en position-try; el navegador las evalúa cuando la posición preferida desborda su containing block.
• Trata position-try-order y position-try-fallbacks como una lista limitada, no como una promesa de que toda ventana cabe.
• Prueba un contenedor con scroll y un clip de overflow por separado: el área disponible puede cambiar.
• Registra estilos calculados, alternativa elegida y captura en cada borde; comprobar una propiedad no demuestra una posición legible.

Contenido

• Modelo de ancla
• Fixture mínimo de overlay
• Los fallbacks son un algoritmo de selección
• Overflow y contenedores con scroll
• Matriz reproducible de límites
• Límite de capacidad de BotBrowser
• Conclusión

Modelo de ancla

Anchor positioning relaciona dos cajas. El ancla publica un nombre en el árbol de layout y el sujeto posicionado lo referencia. anchor() lee un borde o tamaño del ancla, mientras position-area puede elegir un área lógica a su alrededor. La especificación de CSSWG define el modelo y el algoritmo de alternativa; la compatibilidad sigue siendo responsabilidad del navegador, por eso conviene conservar un layout normal como alternativa.

Declaración	Función	Qué revisar
anchor-name: --trigger	Publica un ancla nombrada	El nombre está en el elemento que cambia de tamaño o posición
position-anchor: --trigger	Selecciona el ancla del sujeto	El identificador se resuelve en el sujeto
position-try: --below, --above	Lista alternativas nombradas	El navegador puede escoger una opción viable

Una clase que sólo define position-anchor no funciona si el anchor-name está en un hermano fuera de su containing block. El nombre tampoco crea un stacking context ni una relación de foco. Mantén esas decisiones explícitas y consulta la guía de propiedades de pantalla y viewport cuando la prueba use visual viewport.

Fixture mínimo de overlay

Empieza con una alternativa posicionada normal. El botón sigue siendo usable cuando falta la funcionalidad y el ancho fijo evita que una etiqueta larga cambie el resultado mientras se inspecciona.

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

Los insets de alternativa son CSS ordinario, así que un motor antiguo coloca el tooltip debajo de la barra. En un motor compatible, position-anchor hace que los valores relativos sean efectivos. Los bloques @position-try son candidatos que el agente de usuario prueba en orden, no callbacks de JavaScript. Revisa la referencia de anchor-name en MDN para la sintaxis y la tabla de compatibilidad.

Usa un fixture local con inline-size fijo, outline visible y una etiqueta breve. Captura getComputedStyle(tip).positionAnchor y los valores de getBoundingClientRect() de ambas cajas cuando hayan cargado las fuentes.

Los fallbacks son un algoritmo de selección

La posición preferida aparece en las declaraciones normales. El navegador comprueba si el rectángulo cabe en el containing block con insets. Si no cabe, evalúa las alternativas de position-try o position-try-fallbacks. Cada candidato puede cambiar insets, alineación o tamaño, pero no debe cambiar el significado del componente.

Mantén cada candidato pequeño: --above sólo mueve el sujeto arriba y --inline-end sólo lo mueve al lateral. Así la captura explica qué límite se alcanzó. El artículo de Chrome sobre Anchor Positioning API muestra el modelo de probar una opción y después otra, además de position-try-order.

El orden es observable. Con position-try-order: most-width, una opción lateral puede ganar aunque --above aparezca primero. Si el producto necesita un orden de lectura concreto, decláralo y pruébalo. Conserva viewport, rectángulos y alternativa en un JSON reducido:

{
  "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 }
}

Los números sólo ilustran un resultado revisable. Mantén relaciones esperadas como subject.bottom <= anchor.top para --above; la propiedad presente en computed style no basta si el sujeto queda recortado o tapa el trigger.

Overflow y contenedores con scroll

Un scroll container y un overflow clip plantean preguntas distintas. El primero cambia los píxeles visibles al desplazar; el segundo limita lo que puede pintarse fuera del padding box. Sepáralos:

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

Coloca el ancla al final de .scroll-frame, desplázala hasta el borde y abre el overlay. Registra si el sujeto sigue al ancla y si el frame lo recorta. Repite dentro de .clip-frame. Un rectángulo puede caber en el viewport y aun así ser invisible por el recorte de un ancestro; por eso se necesitan captura y registro geométrico.

Transforms, contain: layout y ancestros posicionados anidados crean containing blocks adicionales. Cambia sólo un ancestro cada vez. Si el sujeto salta al viewport, inspecciona qué elemento establece el containing block antes de tocar offsets. Un z-index grande no puede escapar de un clip.

Matriz reproducible de límites

Ejecuta la misma página con un perfil nuevo por fila y conserva build, zoom, fuentes y device scale factor.

Fila	Cambio	Observación esperada	Interpretación
A	Ancla centrada y viewport amplio	La posición preferida queda visible	Relación base
B	Ancla cerca del final del bloque	Se escoge --above u otra alternativa	Evaluación de la alternativa
C	Ancla dentro de wrapper con scroll	El sujeto sigue después del scroll	Contención de desplazamiento
D	Ancestro con overflow: clip	Existe rectángulo, pero los píxeles pueden recortarse	Límite de pintura
E	Motor sin la funcionalidad	Aparece la alternativa absoluta	Ruta de compatibilidad

Guarda versión, viewport, escala, offsets de scroll, positionAnchor calculado y ambos rectángulos. Un informe útil dice “fila D recortada en .clip-frame”, no “anchor positioning está roto”. Si E difiere, conserva la alternativa legible y enlaza la diferencia a la tabla de compatibilidad.

Límite de capacidad de BotBrowser

BotBrowser puede conservar perfil, viewport, zoom y política de lanzamiento constantes para un fixture autorizado, repetir la matriz y guardar geometría y capturas sin datos sensibles. No puede añadir una funcionalidad CSS ausente, atravesar el clip de un ancestro ni asegurar que todas las versiones elijan la misma alternativa. El resultado describe un motor, build, perfil y viewport concretos.

No uses la colocación anchor como puntuación de identidad. Redimensionar, ampliar zoom, cambiar fuentes o activar accesibilidad puede seleccionar otro candidato. Para un método más amplio de compatibilidad consulta pruebas de plataforma web para confianza de features.

FAQ

¿position-anchor reemplaza el posicionamiento JavaScript?

Puede reemplazar el bucle repetido de medir y escribir estilos para relaciones expresables en CSS. JavaScript puede seguir gestionando estado, foco o una política de colisión propia. Conserva la alternativa para motores sin soporte.

¿Por qué una alternativa cabe en viewport pero no se ve?

Un ancestro puede establecer un padding box de clipping con overflow: clip, contain: paint o un scroll viewport. El rectángulo es válido, pero sus píxeles no pueden pintarse fuera del ancestro. Inspecciona la cadena antes de cambiar z-index.

¿Una alternativa garantiza que el overlay nunca cubra el ancla?

No. La selección está limitada por el containing block y los candidatos declarados. Un viewport pequeño, texto grande o una traducción extensa pueden dejar ninguna opción completa. Define un tamaño máximo legible y una ruta de cierre.

Conclusión

Anchor positioning es una relación CSS con una lista limitada de alternativas. Nombra el elemento móvil, referencia position-anchor, declara candidatos pequeños con position-try y prueba un borde, un scroll container y un overflow clip. Conserva rectángulos y capturas para distinguir selección de alternativa y clipping. BotBrowser puede repetir esa observación controlada; no puede convertir una limitación del navegador en una garantía.

Fuentes públicas

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