Anchor positioning
El anchor positioning coloca un elemento respecto a otro, su ancla, sin JavaScript. Es la base de tooltips, menús desplegables y popovers.
- anchor-name: da un nombre, que empieza por dos guiones, al elemento que hace de ancla.
- position-anchor: indica qué ancla usa un elemento con position: absolute o fixed.
- position-area: coloca el elemento en una zona alrededor del ancla, como top, bottom o right.
- position-try-fallbacks: define posiciones alternativas para cuando el elemento no cabe.
Ejemplo
El elemento con la clase tooltip está anclado al elemento con la clase anchor. Cambia position-area para moverlo a su alrededor.
ResultadoEn vivo
html
css