CSS Anchor Positioning
Posicionamiento de ancla en CSS
El posicionamiento de ancla en CSS coloca un cuadro relativo a otro elemento ancla nombrado.
Otro ejemplo
El popover de ayuda de una tabla está anclado a su botón de información e intenta abrirse primero debajo de él. Cuando solo quedan 12px en el borde de la ventana, `position-try` lo mueve arriba. La posición del ancla coloca la caja. No controla el enfoque ni el cierre. Construye esos comportamientos por separado.
Partes principales
- 01elemento ancla
- 02Caja posicionada
- 03opciones de posición de respaldo
Úsalo cuando
Úselo para información sobre herramientas, popovers, menús y notas que deben seguir un activador y tener posiciones de respaldo claras.
No lo uses cuando
La posición del ancla no gestiona el enfoque ni resuelve todas las colisiones de borde. Mantenga un respaldo sólido para los navegadores y casos que no pueda manejar.
Nombre usado en código
anchor-name + position-anchor + position-area/anchor() + position-try Antes de lanzarlo
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Complete the task with Posicionamiento de ancla en CSS (CSS Anchor Positioning). User context: El popover de ayuda de una tabla está anclado a su botón de información e intenta abrirse primero debajo de él. Cuando solo quedan 12px en el borde de la ventana, `position-try` lo mueve arriba. La posición del ancla coloca la caja. No controla el enfoque ni el cierre. Construye esos comportamientos por separado. Design concept to apply: Posicionamiento de ancla en CSS (CSS Anchor Positioning). Why it fits: Úselo para información sobre herramientas, popovers, menús y notas que deben seguir un activador y tener posiciones de respaldo claras. Do not use it when: La posición del ancla no gestiona el enfoque ni resuelve todas las colisiones de borde. Mantenga un respaldo sólido para los navegadores y casos que no pueda manejar. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): Un documento formal aún puede ser un borrador, un release candidate o una versión final. Revisa su estado y la compatibilidad con tu navegador o plataforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Revisa esta petición
Review how Posicionamiento de ancla en CSS (CSS Anchor Positioning) is used now. Definition: El posicionamiento de ancla en CSS coloca un cuadro relativo a otro elemento ancla nombrado. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.