Entrevista Frontend: Modelo de Posicionamiento de Anclaje (Anchor Positioning) y Primitivas en CSS

1. Enunciado y Caso de Uso

Una anotación de precio sigue a una tarjeta de producto. Su inicio en el eje inline se alinea con el inicio del contenido de la tarjeta, y su tamaño inline coincide con el de la tarjeta. La relación debe mantenerse en modos de escritura de izquierda a derecha, de derecha a izquierda y verticales. Una lista renderiza muchos pares de tarjeta y anotación, mientras que otra vista estira un marcador de rango entre dos puntos finales separados.

Esta pregunta trata sobre el modelo de diseño de CSS Anchor Positioning: cómo un elemento se convierte en ancla, cómo un elemento posicionado absolutamente selecciona un ancla predeterminada, cómo se resuelven las funciones de posición y tamaño, y cómo el ámbito de nombres y los bloques contenedores restringen la relación. La colisión con el viewport y la interacción con widgets flotantes son temas de implementación separados.

2. Lo que el Entrevistador Está Evaluando

Si comprendes que anchor-name expone un ancla y position-anchor selecciona un ancla predeterminada para un elemento posicionado.
Si distingues anchor(), que resuelve una posición, de anchor-size(), que resuelve una longitud.
Si utilizas márgenes internos lógicos (insets) y tamaños lógicos para el soporte del modo de escritura en lugar de fijar todo a left y right.
Si sabes que el orden en el código fuente, el alcance del árbol (tree scope) y anchor-scope afectan la coincidencia de nombres iguales.
Si inspeccionas el bloque contenedor del elemento posicionado, ya que los valores de anclaje aún participan en los cálculos normales de posicionamiento.

3. Preguntas de Aclaración para Hacer Primero

¿Es el destino position: absolute o position: fixed, y qué elemento establece su bloque contenedor?
¿Es la relación de uno a uno, de muchos destinos a un ancla, o de un destino a varias anclas?
¿La página repite componentes con los mismos nombres o cruza un límite de árbol como Shadow DOM?
¿El componente debe admitir modos de escritura verticales y de derecha a izquierda? ¿Debe copiar un ancho físico o un tamaño inline lógico?
¿Qué valor de posicionamiento ordinario debería aplicarse si el ancla con nombre falta o no es aceptable en el contexto actual?

4. Una Estructura de Respuesta en 30 Segundos

Asigna al elemento de origen un identificador con guiones usando anchor-name, luego haz que el destino sea absolute o fixed y selecciona ese origen con position-anchor. Usa anchor() para leer un borde del ancla y anchor-size() para leer una dimensión física o lógica; los insets del destino aún se resuelven dentro de su propio bloque contenedor. Usa inset-inline-*, inset-block-* y inline-size para dar soporte al modo de escritura. Delimita los nombres repetidos con anchor-scope, y nombra las anclas explícitamente dentro de las funciones cuando un destino dependa de varios orígenes.

5. De un Ancla al Diseño Final

Paso 1: Establecer una Relación de Anclaje Explícita

El origen expone uno o más nombres a través de anchor-name. El destino debe tener posicionamiento absolute o fixed antes de que position-anchor pueda seleccionar su ancla predeterminada:

css

.product-card {
  anchor-name: --product-card;
}

.price-note {
  position: absolute;
  position-anchor: --product-card;
}

position-anchor solo establece la referencia predeterminada. No define un inset ni reemplaza el bloque contenedor del destino. Si el nombre no puede resolverse en un ancla aceptable, las funciones dependientes usan su respaldo (fallback) o se vuelven inválidas, por lo que el respaldo de posicionamiento ordinario aún necesita un resultado predecible.

Paso 2: Leer la Posición con anchor()

anchor() produce una longitud para una propiedad de inset, conectando un borde del destino con un borde del ancla. Los insets lógicos permiten que la misma regla siga diferentes modos de escritura:

css

.price-note {
  position: absolute;
  position-anchor: --product-card;
  inset-block-start: anchor(end);
  inset-inline-start: anchor(start);
}

Aquí, start y end se resuelven en el eje correspondiente. Para hacer referencia a algo distinto del ancla predeterminada, coloca su nombre directamente en la función, como anchor(--sidebar end). Los nombres explícitos permiten que diferentes propiedades en un destino dependan de diferentes orígenes.

Paso 3: Construir Relaciones de Tamaño con anchor-size()

anchor-size() devuelve una dimensión física o lógica, no una coordenada. Una anotación puede copiar el ancho lógico de la tarjeta de esta manera:

css

.price-note {
  inline-size: anchor-size(inline);
  max-inline-size: min(32rem, anchor-size(inline));
}

width y height se ajustan a relaciones explícitamente físicas; inline y block se ajustan a componentes que siguen el modo de escritura. La función también puede participar en calc(), por ejemplo para derivar el espaciado a partir de una parte del tamaño inline del ancla. Solo suministra una longitud; la posición del elemento aún sigue las reglas de posicionamiento absoluto.

Paso 4: Hacer Referencia a Más de un Ancla

Un marcador de rango puede asociarse con el inicio como su ancla predeterminada mientras lee explícitamente el final en otro inset:

css

.range-start { anchor-name: --range-start; }
.range-end { anchor-name: --range-end; }

.range-band {
  position: absolute;
  position-anchor: --range-start;
  inset-inline-start: anchor(--range-start center);
  inset-inline-end: anchor(--range-end center);
}

El elemento posicionado todavía tiene solo un ancla predeterminada asociada mediante position-anchor; otros nombres pueden participar en los cálculos de posición mediante anchor(). Esa asociación predeterminada también afecta comportamientos como el acoplamiento al scroll (scroll attachment). Ambos valores de inset entran en la ecuación del bloque contenedor del destino, por lo que el diseño debe definir respaldos para anclas faltantes, cruzadas o inaceptables.

Paso 5: Delimitar el Alcance de Nombres de Ancla Repetidos

Si cada componente repetido declara --item, un elemento posicionado sin alcance delimitado puede coincidir con la última ancla aceptable en el orden del código fuente. anchor-scope limita el mismo nombre a un subárbol de componentes:

css

.result-row {
  anchor-scope: --item;
}

.result-row__value { anchor-name: --item; }
.result-row__note {
  position: absolute;
  position-anchor: --item;
  inset-inline-start: anchor(end);
}

Esto controla la visibilidad del nombre. No puede forzar una referencia a través de alcances de árbol (tree scopes), y no establece un bloque contenedor. El componente todavía necesita un ancestro posicionado de forma deliberada.

Paso 6: Incluir el Bloque Contenedor en el Modelo

La posición devuelta por anchor() se convierte en una longitud utilizable por el inset de destino, pero el destino todavía se distribuye mediante su propio bloque contenedor de posicionamiento absoluto. Cambiar entre absolute y fixed, mover el destino en el DOM o establecer un nuevo contexto de posicionamiento en un ancestro puede cambiar el resultado. Cuando la ubicación sea incorrecta, inspecciona el bloque contenedor del destino antes de depurar la coincidencia del ancla.

6. Ejemplo de Respuesta de Alta Calidad

Anchor Positioning primero relaciona un elemento de origen con un destino posicionado. El origen declara un nombre con anchor-name; un destino absolute o fixed selecciona su origen predeterminado con position-anchor. anchor() suministra una posición a un inset, mientras que anchor-size() suministra una dimensión física o lógica. Utilizo insets lógicos y inline-size para escritura de derecha a izquierda o vertical. Un destino que necesita dos orígenes selecciona una asociación predeterminada y nombra cada origen dentro del anchor() relevante; los componentes de lista repetidos usan anchor-scope para aislar el mismo nombre. También verifico el bloque contenedor del destino, porque las funciones de anclaje no eluden el modelo de posicionamiento absoluto.

7. Errores Comunes

Declarar solo anchor-name y esperar movimiento → aún no existe una relación posicionada → haz que el destino sea absolute o fixed y haz referencia al nombre.
Tratar anchor() como una función de tamaño → las responsabilidades de posición y dimensión se confunden → usa anchor() para los bordes y anchor-size() para las dimensiones.
Codificar de forma fija left y width → la escritura de derecha a izquierda o vertical invierte la relación prevista → elige insets lógicos y tamaños lógicos.
Reutilizar un nombre en elementos de lista sin delimitar el alcance → los destinos siguen la última ancla con el mismo nombre → establece anchor-scope en el contenedor de cada componente.
Tratar anchor-scope como un bloque contenedor → la coincidencia es correcta pero las coordenadas siguen siendo erróneas → inspecciona el ancestro posicionado por separado.
Configurar un solo position-anchor predeterminado para un destino con múltiples anclas → otras propiedades aún leen el origen incorrecto → nombra cada origen explícitamente en su anchor().

8. Preguntas de Seguimiento y Respuestas

Pregunta de seguimiento 1: ¿En qué se diferencia anchor() de position-area?

anchor() convierte un borde de ancla específico en una longitud para un inset, lo cual es útil para relaciones precisas de borde a borde. position-area coloca el destino en una cuadrícula de área centrada en el ancla, lo que expresa una región de ubicación más amplia. Pertenecen al mismo modelo pero resuelven a diferentes niveles.

Pregunta de seguimiento 2: ¿anchor-size() hace que el destino siga el movimiento del ancla?

No. Calcula una longitud. El seguimiento de posición proviene de anchor(), position-area u otra regla de posicionamiento. Configurar únicamente inline-size: anchor-size(inline) sincroniza el tamaño lógico, no la ubicación.

Pregunta de seguimiento 3: ¿Qué sucede cuando varios elementos comparten un anchor-name?

El destino selecciona un ancla aceptable de acuerdo con las reglas de coincidencia, por lo que los componentes repetidos pueden resolverse todos en un origen posterior con el mismo nombre. Delimita el alcance del nombre dentro de cada componente con anchor-scope, o proporciona a las instancias nombres distintos y explícitos.

Pregunta de seguimiento 4: ¿Por qué puede desplazarse el destino cuando el ancla es correcta?

Sus insets todavía participan en el posicionamiento absoluto. El bloque contenedor, el modo de escritura, los márgenes y el tamaño del destino afectan el resultado final. Inspecciona primero el bloque contenedor del destino y luego verifica su ancla predeterminada y el valor resuelto de cada función.