Un aviso que sale debajo de un botón, un menú que se despliega bajo su enlace, una insignia en la esquina de una tarjeta.
anchor-name da nombre al ancla y position-anchor dice a qué ancla va el elemento.
anchor() pega un borde del elemento a un borde del ancla; puede nombrar el ancla dentro.
position-area coloca el elemento en una de las nueve zonas alrededor del ancla.
position-try-fallbacks: flip-block busca otro sitio si no cabe.
Un aviso que sale debajo de un botón, un menú que se despliega bajo su enlace, una insignia en la esquina de una tarjeta. Hasta hace poco todo eso se hacía con JavaScript. Ahora CSS puede anclar un elemento a otro y colocarlo a su lado.
Funciona en Chrome, Edge, Firefox y Safari desde enero de 2026 (así en noviembre de 2026; puede haber cambiado). Lo que ves en esta página es lo que ya funciona en todos.
El ancla lleva un nombre con anchor-name. El nombre empieza por dos guiones. El elemento que se coloca es position: absolute (o fixed) y dice cuál es su ancla con position-anchor. Se coloca con anchor() o con position-area.
<button class="boton">Quiero adoptar</button> <p class="aviso">Solo 5 minutos</p>
.boton { anchor-name: --boton; } .aviso { position: absolute; position-anchor: --boton; top: anchor(bottom); /* su borde de arriba, en el borde de abajo del botón */ left: anchor(left); /* alineado con el borde izquierdo del botón */ }
Dentro de top, bottom, left y right, anchor() da la posición de un borde del ancla: anchor(top), anchor(bottom), anchor(left), anchor(right) o anchor(center).
Quieres…Escribe Debajo del anclatop: anchor(bottom); Encima del anclabottom: anchor(top); A la derechaleft: anchor(right); Alineado con el borde derechoright: anchor(right);
Si el elemento usa dos anclas, el nombre va dentro del paréntesis:
.barra { position: absolute; top: anchor(--boton bottom); left: anchor(--logo right); /* empieza donde acaba el logo */ right: anchor(--boton left); /* y acaba donde empieza el botón */ }
position-area divide el espacio alrededor del ancla en una retícula de 3 × 3, con el ancla en el centro, y coloca el elemento en una zona:
top left │ top │ top right ────────────┼───────────┼──────────── left │ (ancla) │ right ────────────┼───────────┼──────────── bottom left │ bottom │ bottom right
.aviso { position-area: bottom; } /* debajo, centrado */ .insignia { position-area: top right; } /* en la esquina de arriba a la derecha */ .submenu { position-area: bottom span-right; } /* debajo, desde el borde izquierdo hacia la derecha */
Con span- la zona se alarga: bottom span-right ocupa la zona de abajo y la de abajo a la derecha, así que el elemento empieza en el borde izquierdo del ancla. Es lo que necesita un menú desplegable.
Un aviso encima de un botón que está arriba de la página se sale de la pantalla. position-try-fallbacks le dice al navegador qué probar si no cabe:
.aviso { position-area: top; position-try-fallbacks: flip-block; /* si no cabe arriba, abajo */ }
flip-block le da la vuelta en vertical y flip-inline, en horizontal.
En el juego, la web de un refugio de animales tiene etiquetas que colocar junto al botón, la foto, la ficha o el menú. Cada una tiene que acabar en el recuadro discontinuo de su color.
Olvidar position: absolute en el elemento anclado: sin él no se ancla. Escribir el nombre sin los dos guiones (anchor-name: boton). Dar el mismo nombre a varias anclas: el elemento se pega a la última.
Un aviso que sale debajo de un botón, un menú que se despliega bajo su enlace, una insignia en la esquina de una tarjeta.
Código del tema: position-area: bottom
Un aviso que sale debajo de un botón, un menú que se despliega bajo su enlace, una insignia en la esquina de una tarjeta. Hasta hace poco todo eso se hacía con JavaScript. Ahora CSS puede anclar un elemento a otro y colocarlo a su lado.
Funciona en Chrome, Edge, Firefox y Safari desde enero de 2026 (así en noviembre de 2026; puede haber cambiado). Lo que ves en esta página es lo que ya funciona en todos.
anchor-name. El nombre empieza por dos guiones.position: absolute (o fixed) y dice cuál es su ancla con position-anchor.anchor() o con position-area.<button class="boton">Quiero adoptar</button>
<p class="aviso">Solo 5 minutos</p>.boton { anchor-name: --boton; }
.aviso {
position: absolute;
position-anchor: --boton;
top: anchor(bottom); /* su borde de arriba, en el borde de abajo del botón */
left: anchor(left); /* alineado con el borde izquierdo del botón */
}Dentro de top, bottom, left y right, anchor() da la posición de un borde del ancla: anchor(top), anchor(bottom), anchor(left), anchor(right) o anchor(center).
| Quieres… | Escribe |
|---|---|
| Debajo del ancla | top: anchor(bottom); |
| Encima del ancla | bottom: anchor(top); |
| A la derecha | left: anchor(right); |
| Alineado con el borde derecho | right: anchor(right); |
Si el elemento usa dos anclas, el nombre va dentro del paréntesis:
.barra {
position: absolute;
top: anchor(--boton bottom);
left: anchor(--logo right); /* empieza donde acaba el logo */
right: anchor(--boton left); /* y acaba donde empieza el botón */
}Para centrarlo respecto al ancla sin calcular nada: justify-self: anchor-center (en horizontal) o align-self: anchor-center (en vertical).
position-area divide el espacio alrededor del ancla en una retícula de 3 × 3, con el ancla en el centro, y coloca el elemento en una zona:
top left │ top │ top right
────────────┼───────────┼────────────
left │ (ancla) │ right
────────────┼───────────┼────────────
bottom left │ bottom │ bottom right.aviso { position-area: bottom; } /* debajo, centrado */
.insignia { position-area: top right; } /* en la esquina de arriba a la derecha */
.submenu { position-area: bottom span-right; } /* debajo, desde el borde izquierdo hacia la derecha */Con span- la zona se alarga: bottom span-right ocupa la zona de abajo y la de abajo a la derecha, así que el elemento empieza en el borde izquierdo del ancla. Es lo que necesita un menú desplegable.
Para separarlo un poco del ancla, un margen: margin-top: 8px.
Un aviso encima de un botón que está arriba de la página se sale de la pantalla. position-try-fallbacks le dice al navegador qué probar si no cabe:
.aviso {
position-area: top;
position-try-fallbacks: flip-block; /* si no cabe arriba, abajo */
}flip-block le da la vuelta en vertical y flip-inline, en horizontal.
En el juego, la web de un refugio de animales tiene etiquetas que colocar junto al botón, la foto, la ficha o el menú. Cada una tiene que acabar en el recuadro discontinuo de su color.
position: absolute en el elemento anclado: sin él no se ancla.anchor-name: boton).