position-visibility y el soporte real en 2026

Queda un problema que ni el anclaje ni los fallbacks resuelven: qué hacer cuando el ancla desaparece de la pantalla. Un tooltip anclado a un elemento que ha salido por arriba al hacer scroll se queda flotando sin referente visible. position-visibility decide qué ocurre en ese caso. Y como cierre del nivel, la parte que hay que tener clara antes de escribir nada en producción: qué está exactamente en Baseline, qué no, y cómo se degrada.

position-visibility

La propiedad se declara en el elemento anclado y controla cuándo se oculta.

.tooltip {
  position: absolute;
  position-anchor: --boton;
  position-area: block-start center;
  position-visibility: no-overflow;
}

Los tres valores son:

always. El elemento se muestra siempre, pase lo que pase con el ancla. Es el comportamiento por defecto en la práctica y el que quieres cuando el anclado tiene sentido por sí solo.

no-overflow. El elemento se oculta si desborda su rectángulo de visualización. Combínalo con los fallbacks de la lección anterior: primero el motor intenta recolocarlo y, si ninguna alternativa cabe, lo oculta en vez de dejarlo cortado.

anchor-visible. El elemento se oculta cuando su ancla queda completamente tapada o fuera de la pantalla. Es el valor para el caso de esta lección.

Y aquí llega el matiz que hay que conocer para no perder una tarde. Los nombres de esos valores cambiaron por el camino. La especificación tenía originalmente anchors-visible y anchors-valid, en plural, y los renombró a anchor-visible y anchor-valid. Los motores implementaron los antiguos: Chrome 125, Firefox 147 y Safari 26.2 soportan anchors-visible —el plural, hoy marcado como obsoleto— y a agosto de 2026 los nombres nuevos en singular solo están en Safari 27.

En la práctica, si quieres que funcione en los tres motores hoy, tienes que escribir el nombre obsoleto, y conviene declarar los dos para que el código siga funcionando cuando el nuevo se generalice:

.tooltip {
  position-visibility: anchors-visible;   /* nombre que implementan los motores hoy */
  position-visibility: anchor-visible;    /* nombre de la especificación actual */
}

La segunda declaración gana en cascada cuando el navegador la entiende, y se descarta como inválida cuando no. Es el mismo patrón de doble declaración de toda la vida.

no-overflow y always sí tienen el mismo nombre en todas partes: Chrome 125, Firefox 147, Safari 26.2. Nota que la propiedad entera llegó a Safari en la 26.2, no en la 26 como el resto del módulo.

Cuando position-visibility oculta un elemento, lo hace con visibilidad forzada: el elemento deja de pintarse y deja de recibir eventos, pero sigue ocupando su sitio en el árbol y en el orden de foco. No es un display: none.

El estado del soporte, pieza a pieza

Firefox 147 se publicó en enero de 2026 y fue el último motor en llegar; con él, el posicionamiento por anclas pasó a estar en los tres y entró en Baseline como disponibilidad reciente. Safari lo trajo en la 26, de septiembre de 2025, no en ninguna versión 18: si lees en algún sitio que hace falta Safari 18.2 o 18.4, ese dato no cuadra con los datos de compatibilidad actuales.

Dos apuntes más sobre el borde de la característica:

• Las consultas de contenedor ancladas —container-type: anchored, que permite consultar en qué posición alternativa acabó el elemento— están solo en Chrome 143. No las uses todavía salvo como mejora.
• El reposicionamiento del anclado cuando el ancla está transformada o con zoom es un añadido reciente y todavía desigual: Chrome 144 y Safari en versión preliminar, Firefox aún no. Si anclas a un elemento que se mueve con transform, compruébalo.

La degradación

La estrategia correcta es escribir primero una posición que funcione sin anclas y añadir el anclaje dentro de un @supports.

/* base: funciona en cualquier navegador */
.contenedor { position: relative; }
.menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  margin-block-start: .5rem;
}

/* mejora: anclaje real, con reposicionamiento */
@supports (anchor-name: --x) {
  .contenedor { position: static; }
  .disparador { anchor-name: --disparador; }
  .menu {
    position-anchor: --disparador;
    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    inset: auto;                /* anula la colocación de la base */
    margin-block-start: .5rem;
  }
}

La base coloca el menú debajo del disparador con el truco clásico del ancestro relative: sin reposicionamiento automático, pero utilizable. La mejora sustituye esa colocación por el anclaje real y añade los fallbacks. Ningún usuario se queda sin menú.

Comprobar anchor-name en el @supports es suficiente porque las piezas centrales llegaron juntas en los tres motores. Si vas a usar position-visibility, cuya llegada a Safari fue posterior, compruébala aparte.

@supports (position-visibility: no-overflow) {
  .tooltip { position-visibility: no-overflow; }
}

flowchart TB
A[Vas a usar anclaje en produccion] --> B{Tu base de usuarios esta en versiones de 2026}
B -->|Si| C[Usalo directamente, esta en los tres motores]
B -->|No| D[Escribe primero la colocacion sin anclas]
D --> E[Anade el anclaje dentro de supports anchor-name]
E --> F{Necesitas position-visibility}
F -->|Si| G[Comprobacion aparte porque llego mas tarde a Safari]
F -->|No| H[Listo]
C --> I{Necesitas el nombre anchor-visible}
I -->|Si| J[Declara el plural obsoleto y luego el singular]
style A fill:#89b4fa,color:#11111b
style C fill:#a6e3a1,color:#11111b
style E fill:#a6e3a1,color:#11111b
style G fill:#f9e2af,color:#11111b
style J fill:#f9e2af,color:#11111b