Pasting a CSS snippet into a chat window strips away everything that determines how CSS actually behaves: the cascade, the computed values, the parent's layout context, the stacking order. Debug where the runtime context lives — DevTools AI assistance on the live element — or export that context deliberately before you ask any model anything.
Tier: Foundation · Workflow area: Styling, responsive & i18n
CSS bugs are context bugs. z-index: 9999 failing has nothing to do with the line you would paste and everything to do with a transform on an ancestor creating a stacking context. This playbook fixes the workflow, not just the bug.
Interrogate the live element first. Inspect the broken element, open the AI assistance panel, and ask about behavior, not code:
Why does z-index: 50 on this element not place it above the site
header? Walk the ancestor chain and name the stacking context that
actually contains it.
The panel can read the real DOM, computed styles, and ancestor chain — the model answers from evidence your pasted snippet would never contain. A typical grounded answer: ".modal-wrap's transform: translateZ(0) creates a stacking context; your element's z-index only competes inside it."
Ask for the mechanism, then the minimal fix. Force the explanation before accepting a patch:
Explain the mechanism in one paragraph, then give the smallest fix
that does not change this element's painting order with anything else
on the page. List what else each candidate fix could affect.
If the explanation names properties that are not actually on the elements involved, it is guessing — re-anchor it by asking it to quote the computed styles it used.
No AI panel? Export the runtime context yourself. The portable version of the same evidence, from the console:
const el = $0; // last inspected element
const chain = [];
for (let n = el; n; n = n.parentElement) {
const s = getComputedStyle(n);
chain.push([n.tagName + '.' + n.className,
['display','position','z-index','transform','overflow','filter',
'contain','flex','min-width','min-height']
.map(p => p + ':' + s.getPropertyValue(p)).join('; ')]);
}
copy(chain);
Paste that ancestor dump — plus a screenshot — into Claude with the same "name the mechanism" prompt. Computed styles are the ground truth the model needs; authored CSS is only a claim about them.
Verify by toggling, not by believing. Whatever the diagnosis, prove it in the Styles pane before editing source: disable the named culprit property on the named ancestor and watch the bug disappear. If toggling the alleged cause changes nothing, the diagnosis is wrong — go back with that fact, which is itself high-value context.
Port the fix to source at the right layer. DevTools edits vanish on reload. Apply the fix where it belongs — component styles, not a global override — and ask one closing question: "does this fix belong on the element, the ancestor, or in the design-system layer?" Wrong-layer fixes are how !important colonies form.
Bank the pattern. Stacking contexts, flex min-width: auto, margin collapse, and containing blocks for position: fixed cause most "impossible" CSS bugs. When one bites, have the model write a three-line note for your team wiki with the trigger and the tell — the next occurrence becomes a 30-second fix.
DevTools AI assistance sends the inspected page's data to an external service. On client engagements or apps showing user PII, that can be a contract or privacy violation — use the step-3 export with a sanctioned model, and screenshot only after masking real data.
!important, no z-index arms race, no global override for a local bug.The unit of CSS debugging is not the rule, it is the element in context — computed values, ancestors, and the layout mode it lives in. Give any model that context and it is a superb CSS debugger; deny it that context and it pattern-matches on folklore.