When CSS misbehaves, the difference between minutes and hours is method. Senior engineers debug systematically with the right tools rather than randomly changing values. Here are the techniques and the usual culprits.
DevTools is your microscope
The browser inspector shows the computed value of every property, which rule won and which were overridden (struck through), and the full box model. Most "why is this not working" questions are answered in the Styles and Computed panels in seconds — far faster than guessing.
The usual culprits
- A parent created a stacking context, trapping z-index
- overflow: hidden on an ancestor clipping content
- box-sizing not set, so padding inflated widths
- A more specific rule (or !important) silently winning
- A collapsed margin where a gap was expected
- A transform creating a new containing block for fixed children
Stacking and overflow mysteries
Two bugs dominate senior debugging. "My z-index does nothing" is almost always a parent stacking context (created by opacity, transform, filter or its own z-index). "My content is cut off" is usually an ancestor with <code>overflow: hidden</code>. Knowing these two saves enormous time.
Isolate and reproduce
When stuck, reduce the problem to the smallest reproducible case — strip away unrelated markup and CSS until only the bug remains. Often the cause becomes obvious during reduction. A minimal reproduction is also what you would share to get help.
/* add z-index: 9999, position: relative, overflow... *//* inspect → identify the stacking context → fix that */Randomly adding properties hoping one fixes it, which often adds new bugs. Inspect first, form a hypothesis, change one thing, verify.
Debug with method: inspect computed styles, know the common culprits (stacking contexts, overflow, specificity, box-sizing), change one variable at a time, and reduce to a minimal reproduction when stuck.
Open DevTools on any page, select an element, and read its Computed panel and box model. Find a struck-through (overridden) property in the Styles panel and identify which rule won and why.
1. Where do you see which rule won?
2. "z-index does nothing" is usually…
3. Best way to crack a stubborn bug?
- DevTools shows computed values and which rule won — inspect first.
- Common culprits: stacking contexts, overflow, specificity, box-sizing.
- "z-index does nothing" = parent stacking context; "cut off" = overflow.
- Change one thing at a time and reduce to a minimal reproduction.