CSS Anchor Positioning: El Futuro del Posicionamiento UI

Por Jorge Saud · 2 de enero de 2026

El Problema con el Posicionamiento JavaScript

Durante años, posicionar tooltips, popovers y menús desplegables requería librerías JavaScript como Popper.js o Floating UI. Calculabas posiciones, manejabas colisiones con el viewport, gestionabas eventos de scroll y luchabas guerras de z-index.

CSS Anchor Positioning elimina todo eso. Declaras a qué elemento anclar, y dónde colocar el elemento posicionado - eso es todo.

El Concepto Central

Anchor Positioning funciona en dos pasos:

1. Nombrar un ancla - Dale a cualquier elemento un anchor-name
2. Posicionar relativo a él - Usa position-anchor y position-area en el elemento posicionado

/* Paso 1: Nombrar el ancla */
.trigger-button {
  anchor-name: --my-button;
}

/* Paso 2: Posicionar relativo a él */
.tooltip {
  position: fixed;
  position-anchor: --my-button;
  position-area: top center;
}

Ese es todo el concepto. Sin coordenadas JavaScript, sin resize observers, sin cálculos manuales.

Ejemplo Real: Modal Flotante de Resumen

Así es como posiciono el modal del resumidor de IA en este sitio:

.summary-bubble {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 64px;
  height: 64px;
  anchor-name: --summary-bot;
}

.summary-modal {
  position: fixed;
  position-anchor: --summary-bot;
  position-area: top left;
  max-width: 400px;
  width: 90vw;
}

El modal se posiciona automáticamente arriba y a la izquierda del botón. Cuando el botón se mueve (diferentes tamaños de pantalla, posición de scroll), el modal lo sigue.

Entendiendo position-area

La propiedad position-area usa un modelo de grilla de 9 regiones:

┌─────────┬────────┬──────────┐
│ top     │ top    │ top      │
│ left    │ center │ right    │
├─────────┼────────┼──────────┤
│ center  │ center │ center   │
│ left    │        │ right    │
├─────────┼────────┼──────────┤
│ bottom  │ bottom │ bottom   │
│ left    │ center │ right    │
└─────────┴────────┴──────────┘

Valores comunes:

• top center - Arriba del ancla, centrado
• bottom left - Debajo del ancla, alineado a la izquierda
• span-top span-left - Expandirse por el cuadrante superior izquierdo

Ejemplo Real: Notificación de Botón Compartir

Aquí hay una notificación posicionada relativa a un botón de compartir:

#share {
  anchor-name: --share-button;
}

#notification {
  position: fixed;
  position-anchor: --share-button;
  bottom: calc(anchor(top) + 10px);
  /* Posicionar 10px arriba del borde superior del ancla */
}

La función anchor() te da control preciso - referencia cualquier borde del ancla y agrega offsets.

Ejemplo Real: Navegación de Carrusel

Para navegación de scroll markers en carruseles:

ul.carousel {
  anchor-name: --badges-carousel;
  /* ... estilos de scroll snap */
}

ul.carousel::scroll-marker-group {
  position: fixed;
  position-anchor: --badges-carousel;
  position-area: block-end;
  /* Posicionado debajo del carrusel */
}

Nombres de Ancla Dinámicos

Para listas donde cada elemento necesita su propio ancla, usa propiedades personalizadas CSS:

---
const items = ['Item 1', 'Item 2', 'Item 3']
---

{items.map((item, i) => (
  <div style={`anchor-name: --item-${i}`}>
    {item}
  </div>
))}

O en CSS puro con selectores de atributos:

[data-anchor="tooltip-1"] {
  anchor-name: --tooltip-1;
}

[data-anchor="tooltip-2"] {
  anchor-name: --tooltip-2;
}

Manejo de Colisión con Viewport

El navegador maneja automáticamente las colisiones con el viewport usando position-try:

.tooltip {
  position: fixed;
  position-anchor: --button;
  position-area: top center;

  /* Posiciones de respaldo si top no cabe */
  position-try: flip-block, flip-inline, flip-block flip-inline;
}

Valores:

• flip-block - Voltear verticalmente (top ↔ bottom)
• flip-inline - Voltear horizontalmente (left ↔ right)

La Función anchor()

Para posicionamiento preciso, usa la función anchor():

.positioned {
  position: fixed;
  position-anchor: --button;

  /* Posicionar en el borde inferior del ancla + 8px */
  top: calc(anchor(bottom) + 8px);

  /* Centrar horizontalmente con el ancla */
  left: anchor(center);
  translate: -50% 0;
}

La función acepta:

• anchor(top), anchor(bottom), anchor(left), anchor(right)
• anchor(center) - Centro del ancla
• anchor(start), anchor(end) - Propiedades lógicas

Soporte de Navegadores (2026)

A principios de 2026:

• Chrome 125+: Soporte completo
• Edge 125+: Soporte completo
• Firefox: Detrás de flag, esperado pronto
• Safari: En desarrollo

Para producción, verifica soporte y proporciona fallbacks:

.tooltip {
  /* Fallback: posición fija */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@supports (anchor-name: --test) {
  .tooltip {
    position-anchor: --button;
    position-area: top center;
    transform: none;
  }
}

Puntos Clave

1. No requiere JavaScript - CSS puro para lógica de posicionamiento
2. Actualizaciones automáticas - Elementos posicionados siguen sus anclas
3. Consciente del viewport - Detección de colisión integrada con position-try
4. Control preciso - Función anchor() para ubicación pixel-perfect
5. Mejora progresiva - Funciona con fallbacks para navegadores no soportados

CSS Anchor Positioning es una de las características CSS más impactantes de los últimos años. Elimina categorías enteras de código JavaScript y hace que el posicionamiento UI sea declarativo y predecible.

Míralo en acción: El botón flotante del robot en la esquina inferior derecha de esta página usa anchor positioning para su modal. ¡Prueba hacer clic en él!