Stacking Context
Contexte d’empilement
Un contexte de superposition est un groupe local de couches CSS. Les éléments sont d’abord ordonnés à l’intérieur du groupe, puis l’ensemble du groupe est placé parmi d’autres groupes.
Un autre exemple
Une fenêtre modale se trouve à l'intérieur d'une carte transformée, à côté d'un en-tête de page séparé. Même z-index : 9999 ne peut pas déplacer la modale en dehors du contexte d'empilement de la carte. Les valeurs de z-index se comparent uniquement à l'intérieur du contexte auquel elles appartiennent.
Parties principales
- 01racine de contexte
- 02ordre de peinture local
- 03ordre de frères atomiques
Utilisez-le lorsque
Utilisez ce terme pour expliquer pourquoi un enfant qui se chevauche ne peut pas se placer au-dessus d'un élément dans un autre groupe de calques.
Ne l'utilisez pas lorsque
Ne considérez pas la page entière comme une seule échelle de z-index ou n'ajoutez pas de valeurs énormes avant de trouver les racines du contexte.
Nom utilisé dans le code
context root → local paint order → atomic sibling Avant d'expédier
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 Contexte d’empilement (Stacking Context). User context: Une fenêtre modale se trouve à l'intérieur d'une carte transformée, à côté d'un en-tête de page séparé. Même z-index : 9999 ne peut pas déplacer la modale en dehors du contexte d'empilement de la carte. Les valeurs de z-index se comparent uniquement à l'intérieur du contexte auquel elles appartiennent. Design concept to apply: Contexte d’empilement (Stacking Context). Why it fits: Utilisez ce terme pour expliquer pourquoi un enfant qui se chevauche ne peut pas se placer au-dessus d'un élément dans un autre groupe de calques. Do not use it when: Ne considérez pas la page entière comme une seule échelle de z-index ou n'ajoutez pas de valeurs énormes avant de trouver les racines du contexte. 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 document officiel peut quand même être un brouillon, un release candidate, ou la version finale. Vérifie son statut et sa compatibilité avec le navigateur ou la plateforme. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Vérifiez cette demande
Review how Contexte d’empilement (Stacking Context) is used now. Definition: Un contexte de superposition est un groupe local de couches CSS. Les éléments sont d’abord ordonnés à l’intérieur du groupe, puis l’ensemble du groupe est placé parmi d’autres groupes. 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.