CSS Lab
Department of Applied Layout
A room full of rulers, coordinate systems and boxes that refuse to be the size you asked for. Home of the institute's stacking context collection, kept behind glass for everyone's safety.
Experiments
- cssENGINEER
Why can z-index: 999999 lose?
Two overlapping elements. One asks for 999999. The other asks for 2. The 2 wins. Nothing is broken.
css9 min - cssENGINEER
What actually creates a stacking context?
A field guide to the twenty-odd declarations that quietly reorganise your paint order.
css7 min - cssCURIOUS
Why does width: 100% overflow?
The child was told to be exactly as wide as its parent. It is now wider than its parent. Both are correct.
css6 min - cssDEVELOPER
How does intrinsic sizing work?
min-content, max-content, fit-content, and the `min-width: auto` rule that makes flex items refuse to shrink.
css8 min
Case files
- Case fileUNSOLVED
The Missing Button
The button is in the DOM. The CSS says it is visible. Nobody can see it. The developer insists everything is correct, and the developer is telling the truth.
DEVELOPER6 clues4 suspects - Case fileUNSOLVED
The Phantom Horizontal Scrollbar
A horizontal scrollbar appears on mobile. Every element inspected fits. The page scrolls sideways by exactly 17 pixels, and nobody can find the culprit.
DEVELOPER4 clues3 suspects
Myths filed against this lab
- ClaimBUSTED
“Just add !important.”
It works exactly once. Then it becomes the thing the next person has to defeat, and the only way to defeat it is another !important.
DEVELOPERcss - ClaimBUSTED
“Tailwind means you don't need CSS knowledge.”
Utility classes change how you write declarations. They do not change the box model, the cascade, stacking contexts or formatting contexts, and those are the parts that confuse people.
CURIOUScss