Planteamiento y contexto
Un botón de acción en una tabla de datos abre un menú o burbuja de ayuda. El panel flotante debe seguir al botón al hacer scroll, alejarse de los bordes del viewport y evitar ser recortado por ancestros; se debe mantener el soporte para móviles, usuarios de teclado y navegadores sin el nuevo CSS. Diseña esto con CSS Anchor Positioning y explica cuándo conservar scripts o la Popover API.
Esta pregunta encaja en roles de frontend, sistemas de diseño y plataformas de componentes. La clave es combinar la ubicación geométrica, la gestión de desbordamiento, la semántica de interacción y las restricciones de compatibilidad.
Qué evalúa el entrevistador
Una respuesta sólida distingue entre un elemento ancla y un elemento posicionado por ancla, y explica cómo anchor-name, position-anchor, anchor() o position-area crean la relación. También cubre el orden de position-try, las decisiones de desbordamiento, el comportamiento de ocultación, los contenedores de scroll, los contextos de apilamiento, el foco del teclado y las alternativas.
Aclaraciones para hacer primero
- ¿El panel es un menú, tooltip, selector o una explicación no interactiva? ¿Necesita semántica de Popover o diálogo?
- ¿Cuáles son las posiciones preferidas y alternativas permitidas, el tamaño mínimo legible y el margen de seguridad del viewport?
- ¿El activador está dentro de un contenedor de scroll o recorte, o dentro de un elemento transformado?
- Si el contenido crece, ¿debe cambiar de posición, encogerse, tener scroll interno o convertirse en una superficie de pantalla completa?
- ¿Qué navegadores son el objetivo y qué posicionamiento estable sirve como alternativa para navegadores antiguos?
Una respuesta en 30 segundos
«Haría del activador un ancla y del panel un elemento con posición absoluta o fija. Lo ubicaría con anchor() o position-area, y luego declararía alternativas superiores y laterales con position-try. El componente aún necesita un límite de tamaño, margen respecto al viewport y semántica de foco y cierre; los navegadores no compatibles usan la Popover API existente o una alternativa calculada. Probaría el scroll, zoom, contenido extenso, navegación por teclado y los bordes del viewport tanto en modo mejorado como en el alternativo».
Solución paso a paso
Paso 1: Crear la relación de anclaje
Expón un nombre desde el activador con anchor-name y luego selecciónalo desde el panel con position-anchor. Para asociaciones implícitas, verifica el alcance del DOM y las reglas de nombres duplicados para que una fila repetida no se vincule a un botón diferente.
Paso 2: Elegir una expresión de ubicación
anchor() lee un borde o centro del ancla dentro de las propiedades de inset; position-area expresa regiones lógicas como block-start o inline-end. Ambas necesitan una posición explícita, límites de tamaño y separación en lugar de un único desplazamiento fijo en píxeles.
.action {
anchor-name: --action;
}
.menu {
position: absolute;
position-anchor: --action;
top: anchor(bottom);
inset-inline-start: anchor(start);
margin-block-start: 0.5rem;
}Paso 3: Declarar el orden de alternativas
La opción predeterminada es debajo del botón; cuando el espacio es insuficiente, position-try puede probar arriba y en el lateral inline-end. El orden debe reflejar la prioridad del producto y usar direcciones lógicas tanto para configuraciones regionales de izquierda a derecha como de derecha a izquierda.
.menu {
position-try: flip-block, flip-inline;
max-inline-size: min(90vw, 24rem);
max-block-size: min(70vh, 32rem);
overflow: auto;
}Paso 4: Definir el estado de ubicación imposible
Cuando todas las opciones candidatas se desbordan, elige deliberadamente: reducir y hacer scroll, ocultar una sugerencia no crítica o cambiar a una superficie de pantalla completa. No dejes medio menú fuera del viewport ni confundas el desbordamiento con el cierre.
Paso 5: Considerar contenedores y apilamiento
overflow: hidden, las capas de recorte, transform, contain y z-index pueden cambiar el límite visible o el bloque contenedor. Verifica el contexto de posicionamiento real; si es necesario, renderiza en una capa superior (top layer) adecuada mientras conservas la relación entre el activador y el panel.
Paso 6: Preservar la semántica de interacción y accesibilidad
Anchor Positioning proporciona geometría, no semántica de menú, tooltip o ventana emergente. Los componentes interactivos aún necesitan un rol y nombre adecuados, navegación por teclado, cierre con Escape y retorno de foco; una sugerencia no interactiva no debe depender únicamente del hover.
Paso 7: Planificar la alternativa de compatibilidad
MDN marca partes de Anchor Positioning como capacidades más recientes. Mantén un estilo predeterminado utilizable y luego habilita la mejora tras detectar el soporte; los navegadores más antiguos pueden usar la Popover API, una utilidad existente de posicionamiento de componentes o una alternativa ligera calculada por script. No sacrifiques la accesibilidad del menú solo por evitar scripts.
Paso 8: Construir una validación reproducible
Cubre todas las esquinas del viewport, contenedores de scroll, zoom, tamaño de texto dinámico, etiquetas largas, RTL, teclados virtuales, navegación por teclado y lectores de pantalla. Registra la posición candidata, el recorte, el foco, el bloqueo de scroll y el cambio de diseño (layout shift) tanto en entornos compatibles como en los de reserva.
Compensaciones y límites
Anchor Positioning traslada las reglas comunes de anclaje y alternancia a CSS y puede reducir las mediciones por fotograma. Sigue estando limitado por la implementación del navegador, el contexto de posicionamiento y la semántica del componente. Las reglas de colisión complejas, la ubicación entre capas superiores o las mediciones específicas del negocio aún pueden requerir scripts.
position-try elige entre candidatos; no garantiza contenido legible. Los límites de tamaño, el scroll, el foco y el cierre siguen siendo responsabilidades del componente. Popover aporta cierto comportamiento de interacción, pero no reemplaza todos los diseños de menús o diálogos.
Plan de despliegue y evidencia
Realiza una prueba piloto con un menú de acciones que tenga una posición preferida, tres alternativas, un tamaño máximo y un margen respecto al viewport. Registra la matriz de compatibilidad de navegadores y mantén una ubicación predeterminada estable para entornos no compatibles.
Documenta la nomenclatura de anclas, el orden de alternativas, las direcciones lógicas, los límites de recorte, los roles, el foco y los casos de prueba. Verifica los cambios de posición con scroll real y contenido largo en lugar de depender de capturas de pantalla estáticas.
Errores comunes y seguimiento
Escribir anchor() sin alternativas
El panel puede quedar recortado en un borde. Declara prioridades candidatas y define una superficie desplazable o alternativa cuando fallen todos los candidatos.
Tratar la ubicación como semántica de interacción
CSS no convierte un panel en un menú o tooltip. Añade el rol, nombre, ruta de navegación por teclado, manejo de Escape y retorno de foco.
Ignorar ancestros de scroll y recorte
Un z-index más alto no puede escapar de un bloque contenedor incorrecto. Inspecciona overflow, transform, contain y el contexto de scroll antes de cambiar la capa de renderizado.
Probar solo en Chromium
Las matrices de compatibilidad evolucionan. Ejecuta los mismos casos de bordes, teclado, RTL y contenido largo en modo mejorado y en modo alternativo.
¿Qué pasa si el panel sigue siendo ilegible?
Revisa primero las posiciones candidatas y el tamaño máximo; luego opta por scroll interno, reducción de tamaño, una superficie a pantalla completa u ocultar contenido no crítico; no aumentes simplemente el z-index ni desactives las comprobaciones de desbordamiento.