CSS Anchor Positioning
Posizionamento Anchor CSS
Il Posizionamento Anchor CSS posiziona una scatola rispetto a un altro elemento di ancoraggio nominato.
Un altro esempio
Il popover di aiuto di una tabella è ancorato al suo pulsante informazioni e cerca prima di aprirsi sotto di esso. Quando rimangono solo 12px al bordo della finestra, `position-try` lo sposta sopra. Il posizionamento dell'ancora colloca la finestra. Non controlla il focus o la chiusura. Costruire separatamente questi comportamenti.
Parti principali
- 01elemento ancora
- 02Casella posizionata
- 03Opzioni di posizione di ripiego
Usalo quando
Usalo per suggerimenti, popover, menu e note che devono seguire un attivatore e avere posizioni di riserva chiare.
Non usarlo quando
Il posizionamento dell'ancora non gestisce il focus né risolve ogni collisione di bordo. Mantieni un solido fallback per i browser e i casi che non può gestire.
Nome usato nel codice
anchor-name + position-anchor + position-area/anchor() + position-try Prima di spedire
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 Posizionamento Anchor CSS (CSS Anchor Positioning). User context: Il popover di aiuto di una tabella è ancorato al suo pulsante informazioni e cerca prima di aprirsi sotto di esso. Quando rimangono solo 12px al bordo della finestra, `position-try` lo sposta sopra. Il posizionamento dell'ancora colloca la finestra. Non controlla il focus o la chiusura. Costruire separatamente questi comportamenti. Design concept to apply: Posizionamento Anchor CSS (CSS Anchor Positioning). Why it fits: Usalo per suggerimenti, popover, menu e note che devono seguire un attivatore e avere posizioni di riserva chiare. Do not use it when: Il posizionamento dell'ancora non gestisce il focus né risolve ogni collisione di bordo. Mantieni un solido fallback per i browser e i casi che non può gestire. 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 formale può ancora essere una bozza, un release candidate o la versione finale. Controlla il suo stato e il supporto per browser o piattaforma. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Controlla questa richiesta
Review how Posizionamento Anchor CSS (CSS Anchor Positioning) is used now. Definition: Il Posizionamento Anchor CSS posiziona una scatola rispetto a un altro elemento di ancoraggio nominato. 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.