Stacking Context
Contesto di impilamento
Un contesto di impilamento è un gruppo locale di livelli CSS. Gli elementi all'interno del gruppo sono ordinati prima, poi l'intero gruppo viene posizionato tra gli altri gruppi.
Un altro esempio
Un modal è all'interno di una card trasformata, accanto a un'intestazione di pagina separata. Anche z-index: 9999 non può spostare il modal fuori dal contesto di impilamento della card. I valori di z-index si confrontano solo all'interno del contesto a cui appartengono.
Parti principali
- 01radice del contesto
- 02ordine di pittura locale
- 03ordine di fratelli atomici
Usalo quando
Usa questo termine per spiegare perché un elemento figlio sovrapposto non può salire sopra un elemento in un altro gruppo di livelli.
Non usarlo quando
Non considerare l'intera pagina come una singola scala di z-index o aggiungere valori enormi prima di trovare le radici del contesto.
Nome usato nel codice
context root → local paint order → atomic sibling 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 Contesto di impilamento (Stacking Context). User context: Un modal è all'interno di una card trasformata, accanto a un'intestazione di pagina separata. Anche z-index: 9999 non può spostare il modal fuori dal contesto di impilamento della card. I valori di z-index si confrontano solo all'interno del contesto a cui appartengono. Design concept to apply: Contesto di impilamento (Stacking Context). Why it fits: Usa questo termine per spiegare perché un elemento figlio sovrapposto non può salire sopra un elemento in un altro gruppo di livelli. Do not use it when: Non considerare l'intera pagina come una singola scala di z-index o aggiungere valori enormi prima di trovare le radici del contesto. 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 Contesto di impilamento (Stacking Context) is used now. Definition: Un contesto di impilamento è un gruppo locale di livelli CSS. Gli elementi all'interno del gruppo sono ordinati prima, poi l'intero gruppo viene posizionato tra gli altri gruppi. 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.