A tooltip can be locally highest and still disappear at a card edge. That result is not paradoxical: z-index orders eligible paint inside a context, while paint containment controls which descendant pixels may appear outside the containment box.
This guide traces the complete consequence bundle of contain:paint. It uses small two-card examples, then changes one declaration at a time so clipping, ancestor ordering and containing-block changes can be observed separately.
The W3C containment and painting specifications are the authority. The examples are original teaching cases, not claims about one framework or browser bug.
The central card creates paint containment. Its child menu extends 40 pixels beyond the card and has z-index:9999. A sibling card is in a parent context above the first card. The menu loses twice: its overflow is clipped, and its ancestor context is painted below the sibling.
This specialist guide belongs to the Websites root. It also connects to The Gold Standard of Education | Learning That Transfers into Life and the How X Works hub. The worked cases are original teaching examples; their numbers are stipulated so that the reasoning can be checked.
eduKateSG · Websites
Find your next learning step
Paint containment clips descendant overflow and also creates a stacking context and positioning containing blocks. Those effects arrive together, but clipping, local paint order and coordinate resolution remain different decisions.
ROUTE 2 · CHAPTERS 6–10
Work the box model
Compare overflow, clip margin, containing blocks and isolation.
ROUTE 4 · CHAPTERS 16–20
Transfer the diagnosis
Use reductions, nested contexts, animation and component contracts.
ROUTE 5 · CHAPTERS 21–28
Report and continue
Add edge-case tests, repair explanations, use standards and follow sibling routes.
Chapter contents
Separate the effects · Chapters 1–5
2. Read the computed containment value
Work the box model · Chapters 6–10
6. Distinguish overflow values
7. Use overflow-clip-margin carefully
Protect interaction · Chapters 11–15
11. Account for filters and shadows
13. Handle portals and top-layer UI
Transfer the diagnosis · Chapters 16–20
16. Work a two-card calculation
Report and continue · Chapters 21–28
21. Distinguish the containment clip from rounded decoration
22. Keep layout overflow and ink overflow separate
23. Trace negative stack levels locally
24. Test removal as a three-column experiment
25. Repair misleading explanations
26. Answer focused reader questions
Start with the mechanism, not the symptom. Paint containment clips descendant ink and scrollable overflow, establishes positioning containing blocks, and creates a stacking context; these effects travel together in the specification but answer different debugging questions. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Worked case: A tooltip extends twenty pixels beyond a card using contain:paint and disappears even though it has z-index:9999. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Evidence check: Inspect the overflow clip edge, the containment box and the ancestor stacking-context tree before changing z-index. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Changed-context transfer: Replace contain:paint with isolation:isolate; local stacking remains isolated but the containment clipping consequence no longer follows from paint containment. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
Keep the two objects in separate ledger columns. The contain property can combine size, layout, style and paint containment, while content and strict are shorthands with broader consequences. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Concrete case: A component receives contain:content through a utility class, so its paint and layout behaviour change even though no rule literally says contain:paint. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Practical check: Use computed styles and the cascade owner; a stylesheet text search can miss a shorthand or later override. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Transfer test: Change content to layout and compare clipping, containing-block behaviour and the new stacking context under the stated specification. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
The short answer becomes reliable only when its boundary is named. Paint containment has no effect where the element does not generate a qualifying principal box, including display:none and display:contents cases described by the specification. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Reason through this case: A wrapper with display:contents also declares contain:paint, yet its descendant is not clipped by a wrapper box that does not exist. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Audit the claim with this evidence: Confirm box generation in the layout tree before diagnosing clipping or z-order from the DOM tree alone. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Now change one condition: Change the wrapper to display:block and repeat the same overflow test. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
A useful explanation preserves cause, observation and decision. Clipping determines which pixels can appear outside a boundary; stacking determines the order among pixels that remain eligible to paint. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Use this stipulated example: A badge is above every sibling inside its card but its outer half is clipped at the card edge. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Verify rather than assume: Temporarily outline the clip edge and inspect the stacking-context tree; success in one test does not imply success in the other. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Test whether the reasoning travels: Move the badge fully inside the edge while keeping z-index fixed, then remove containment while keeping position fixed. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
Start with the mechanism, not the symptom. The paint containment box is treated atomically in its parent stacking context, so descendant z-index values compete locally rather than with outside siblings. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Worked case: Card A has stack level one and a child at 9999; Card B is a sibling context at level two and paints above all of Card A. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Evidence check: Compare ancestor contexts before descendant numbers, following CSS painting order rather than sorting every z-index on the page. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Changed-context transfer: Raise Card A in the parent context without touching the child, then remove Card A’s context and compare. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
Keep the two objects in separate ledger columns. Paint containment applies a containment clip consequence even when authored overflow appears visible; authored overflow also controls scrolling and access mechanisms under its own rules. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Concrete case: A developer changes overflow:visible to hidden and sees no improvement because contain:paint already kept descendant ink inside the containment edge. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Practical check: Read used behaviour, overflow-clip-margin and whether a scroll container was created; do not infer from one declaration. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Transfer test: Set overflow:auto on a genuinely overflowing content box and test scrolling separately from paint order. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
The short answer becomes reliable only when its boundary is named. The containment clip can allow a limited margin for ink effects without abolishing containment or creating a global escape route. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Reason through this case: A focus ring needs four pixels beyond the card edge, while a menu must extend two hundred pixels beyond it. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Audit the claim with this evidence: Measure the required visual overflow and test browser support and accessibility; one margin should not be used to solve unrelated overlays. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Now change one condition: Increase the clip margin for the focus ring, then portal the menu outside the contained subtree. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
A useful explanation preserves cause, observation and decision. Paint containment establishes containing blocks for absolute and fixed positioning, so coordinates can change at the same time as clipping and stacking. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Use this stipulated example: A supposedly viewport-fixed notice becomes positioned relative to the contained card after a containment rule is introduced. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Verify rather than assume: Inspect the containing-block chain and used inset values before treating the movement as a z-index failure. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Test whether the reasoning travels: Move the fixed notice outside the containment box and retain contain:paint on the card. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
Start with the mechanism, not the symptom. Isolation creates a new stacking context for blending and paint-order isolation but does not itself promise the containment clipping and positioning effects of contain:paint. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Worked case: Two cards need independent local layer scales, yet their shadows and menus are allowed beyond the card bounds. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Evidence check: Test the exact desired consequence: local atomic ordering, clipping, containing blocks or rendering optimization. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Changed-context transfer: Swap contain:paint for isolation:isolate and document which observations change. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
Keep the two objects in separate ledger columns. An overflow clip can hide content without necessarily creating the same stacking-context and containing-block package as paint containment. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Concrete case: A plain overflow:hidden panel clips a child, while an outside sibling still compares through the existing context tree. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Practical check: Inspect both the clip source and the context creator; identical missing pixels can arise from different CSS mechanisms. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Transfer test: Remove overflow while retaining paint containment, then remove containment while restoring overflow. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
The short answer becomes reliable only when its boundary is named. Paint effects such as blur and box-shadow can extend beyond a border, and containment determines whether descendant ink survives past the clip edge. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Reason through this case: A child shadow is cut while the card’s own shadow remains visible because the card’s decoration and descendant overflow occupy different roles. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Audit the claim with this evidence: Toggle the child effect, visualize the clip edge and distinguish the containing element’s paint from contained descendant ink. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Now change one condition: Move the shadow to the containment box itself and compare the rendered boundary. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
A useful explanation preserves cause, observation and decision. Clipped focus indicators can make keyboard position hard to see even when pointer interaction appears correct. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Use this stipulated example: A focused link at the card edge draws an outer ring that is partly removed by paint containment. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Verify rather than assume: Navigate by keyboard, test high zoom and forced-colour modes, and check whether the focus cue remains perceivable. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Test whether the reasoning travels: Use an inset indicator or justified clip margin without weakening unrelated overlay boundaries. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
Start with the mechanism, not the symptom. Some interface elements are better rendered outside a contained component, and top-layer mechanisms follow their own ordering rules. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Worked case: A menu portalled to a document-level overlay escapes card clipping, while its trigger and accessible relationship remain inside the card. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Evidence check: Verify focus return, labelling, dismissal and coordinate updates; visual escape alone does not prove a usable component. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Changed-context transfer: Replace the portal with a native popover and test the applicable top-layer behaviour. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
Keep the two objects in separate ledger columns. A pixel that is clipped is not a dependable interaction target, and pointer hit testing must be checked rather than inferred from DOM bounds. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Concrete case: An invisible overflow portion still occupies author-intended geometry, but the visible and clickable region ends at the containment boundary in the tested browser. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Practical check: Use pointer and keyboard tests plus accessibility inspection; do not rely only on getBoundingClientRect. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Transfer test: Change the clip margin and repeat hit tests at the newly visible edge. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
The short answer becomes reliable only when its boundary is named. will-change can create contexts for properties that would do so at non-initial values, but it is a performance hint with side effects and not a general z-index repair. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Reason through this case: Adding will-change:transform appears to fix one animation but introduces an unexpected context boundary for a tooltip. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Audit the claim with this evidence: Remove the hint in a minimal reproduction and confirm which computed property creates the context. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Now change one condition: Apply will-change only during the justified animation lifecycle and keep overlays outside. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
A useful explanation preserves cause, observation and decision. Parent context compares Card A at three with Card B at four; Card A’s menu at one million remains inside A, and paint containment clips the part extending beyond A’s edge. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Use this stipulated example: Changing the menu to two million alters neither the parent comparison nor the clipping boundary. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Verify rather than assume: Write the comparison as two decisions: eligibility inside the clip and atomic order of A versus B. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Test whether the reasoning travels: Raise A to five and enlarge overflow-clip-margin by eight pixels; recompute each decision independently. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
Start with the mechanism, not the symptom. A minimal reproduction should preserve the containment property, the relevant boxes, one overlap and one overflow edge while removing framework noise. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Worked case: Reduce a dashboard to two cards, one child and four declarations, then add rules back in cascade order. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Evidence check: Capture computed styles and a screenshot at each step so a transient inspector edit does not become the only evidence. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Changed-context transfer: Reintroduce transforms, opacity and overflow one at a time. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
Keep the two objects in separate ledger columns. Nested paint-containment boxes create nested clips and stacking contexts, and a descendant must survive every relevant boundary. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Concrete case: An icon passes the inner clip margin but is removed by the outer card’s tighter containment edge. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Practical check: Walk outward through all clip and context ancestors; stopping at the nearest matching declaration can miss the actual limiter. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Transfer test: Remove the inner containment, then the outer containment, recording which pixels return. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
The short answer becomes reliable only when its boundary is named. Transforms and opacity used during animation can create stacking contexts even before or after containment is considered. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Reason through this case: A card enters with opacity below one, making an extra context during the transition and changing overlap with a sticky header. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Audit the claim with this evidence: Inspect initial, active and final computed states, including prefers-reduced-motion behaviour. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Now change one condition: Disable the animation while retaining containment, then retain animation while removing containment. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
A useful explanation preserves cause, observation and decision. Reusable components need named local layers and an explicit policy for overlays that may leave the component box. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Use this stipulated example: A card reserves local levels for background, content and in-card controls, while global dialogs use a separate overlay host. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Verify rather than assume: Document context creators, allowed overflow and portal ownership instead of publishing ever-larger z-index constants. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Test whether the reasoning travels: Embed the component inside another contained panel and run the same contract tests. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
CHAPTER 21 OF 28 · Report and continue
21. Distinguish the containment clip from rounded decoration
Start with the mechanism, not the symptom. The paint-containment boundary follows the applicable overflow clip edge; a decorative border radius and an independently authored clipping path can alter visible geometry without changing the ancestor stacking-context comparison. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Worked case: A card has a twelve-pixel radius, contain:paint and a square child that reaches the corner; its missing corner pixels do not prove that the child lost a z-index contest. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Evidence check: Overlay the used clip geometry and temporarily remove the radius, clip path and containment one at a time so the responsible boundary stays observable. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Changed-context transfer: Keep containment fixed but change only the radius, then keep the radius fixed and remove containment. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
CHAPTER 22 OF 28 · Report and continue
22. Keep layout overflow and ink overflow separate
Keep the two objects in separate ledger columns. Layout overflow comes from box geometry, while ink overflow includes visual effects such as shadows; paint containment can suppress descendant paint beyond its boundary without changing the child’s declared width. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Concrete case: A child remains two hundred pixels wide in layout measurements although its outer glow is cut at the contained card edge. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Practical check: Compare used sizes, scroll dimensions and a pixel screenshot; none of those measurements alone describes both geometry and rendered ink. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Transfer test: Remove the glow while preserving the oversized box, then shrink the box while restoring the glow. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
The short answer becomes reliable only when its boundary is named. A negative z-index descendant is ordered within the stacking context created by paint containment and cannot be compared directly with a negative layer in a different ancestor context. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Reason through this case: A decorative child at z-index:-1 sits behind its card content yet the entire contained card still paints above an outside background in the parent context. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Audit the claim with this evidence: Write the context tree first, then apply the painting order inside each node; do not flatten negative and positive integers from separate contexts. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Now change one condition: Lower the card’s parent-level stack position while leaving the child at minus one. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
CHAPTER 24 OF 28 · Report and continue
24. Test removal as a three-column experiment
A useful explanation preserves cause, observation and decision. Removing contain:paint can simultaneously change clipping, ancestor participation and positioning coordinates, so a before-and-after screenshot does not identify which consequence fixed the symptom. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Use this stipulated example: A menu appears after containment is removed, but it also moves because its absolute-positioning containing block changed. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Verify rather than assume: Record visible pixels, context ancestry and used offsets in separate columns before choosing the repair. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Test whether the reasoning travels: Restore containment, portal the menu, and preserve the original coordinates to isolate the escape mechanism. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
Start with the mechanism, not the symptom. Saying contain:paint is just overflow:hidden or just a performance switch erases its stacking-context and containing-block consequences. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Worked case: A code review notes only clipping and later treats the changed fixed-position coordinates as an unrelated bug. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Evidence check: Replace the shortcut with the exact four-effect statement from the current containment specification. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Changed-context transfer: Ask a reviewer to predict clipping, parent order and coordinates before running the example. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
Keep the two objects in separate ledger columns. A large z-index cannot cross an ancestor context, paint containment does create a context, and clipping can still hide the locally topmost child. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Concrete case: The same declaration may therefore explain both an overlap surprise and a missing shadow, but through separate normative effects. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Practical check: Answer each question with the relevant box, ancestor and edge rather than a browser folklore rule. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Transfer test: Change only one effect source at a time and state the new expected result. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
The short answer becomes reliable only when its boundary is named. The W3C CSS Containment specification defines paint clipping, containing blocks, stacking context creation and independent formatting context; CSS 2.2 explains context painting order. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Reason through this case: Read https://www.w3.org/TR/css-contain-2/#paint-containment and https://www.w3.org/TR/CSS22/zindex.html alongside the worked cases. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Audit the claim with this evidence: Check current specification status and browser behaviour for the exact property combination used in production. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Now change one condition: Preserve a reduced test with the standards links in the engineering record. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
A useful explanation preserves cause, observation and decision. The existing stacking-context guide owns ancestor ordering, while this guide owns the bundled effects introduced by paint containment. State which property is being changed, which box, channel, credential or measurement owns it, and which conclusion is still undecided.
Use this stipulated example: Continue with https://edukatesg.com/portfolio/the-gold-standard-of-websites-tracing-stacking-contexts-when-a-large-z-index-still-paints-behind-another-panel/ for the full parent-context calculation. Keep every stipulated value and comparison visible so another reader can reproduce the result without supplying a hidden default.
Verify rather than assume: Return to the Websites root for containing blocks, sizing, grid placement and other distinct mechanisms. Record the definition, version, measurement window or processing rule that makes the evidence relevant, together with any unresolved condition.
Test whether the reasoning travels: Classify a new bug before choosing the sibling route; shared words do not imply shared cause. Re-run the decision from the changed input instead of copying the earlier label. Explain what changed, what stayed fixed and what the example cannot prove.
Continue through the verified reading route
Stacking contexts and ancestor order
Stacking contexts and ancestor order. Use this when the pixels are not clipped but a descendant still paints behind a panel in another ancestor context.
Containing blocks for absolute positioning
Containing blocks for absolute positioning. Use this when the main question is which ancestor supplies the coordinate system.
CSS Grid placement and document order
CSS Grid placement and document order. Use this when visual reordering comes from grid placement rather than paint containment.
Frequently asked questions
Does a very large z-index escape paint containment?
No. A descendant z-index is evaluated inside its stacking context, and it does not remove the containment clip.
Is contain: paint the same as overflow: hidden?
No. Both can remove visible overflow, but paint containment also creates a stacking context and positioning containing blocks under the specification.
Should every clipped menu be given a larger clip margin?
No. Small ink effects may justify a measured margin; large overlays often need a different rendering boundary such as a portal or applicable top-layer mechanism.
What is the fastest diagnostic?
Record the clip edge, stacking-context tree and containing-block chain separately, then change one cause at a time.
Authoritative sources and further reading
CSS Containment Module Level 2. Normative containment effects, applicability and paint-containment behaviour.
CSS 2.2 Appendix E: Elaborate description of Stacking Contexts. Normative painting order used to compare local and ancestor stacking contexts.
Return to the Websites subject guide, The Gold Standard of Education, or the How X Works hub.