The Modal Behind the Header

A frontend interview goes fake the moment the candidate gives the textbook answer and I nod as if either of us learned something.

It gets useful again when they tell me what they’d do in a real codebase, with a teammate waiting on the fix. I have two ways of steering it there. One is CSS fundamentals, because CSS shows very quickly whether someone understands the browser or has just memorised a lot of utility classes. The other is React pair coding with this challenge template, because implementation choices get much clearer when we’re both looking at the same screen.

Questions that make the browser appear

I start with specificity. How would you explain it to a teammate who’s stuck and annoyed? Knowing the rules is the easy half.

Then units. Which of these do they actually use in production, and which do they avoid unless there’s a good reason?

%
px
em
rem
vh

How would they make a div truly full-page height without accidentally creating a mobile Safari bug?

In an LTR/RTL layout, how would they set a 1em margin at the end of text correctly?

How would they build a footer with predictable margins across breakpoints, and then stop the next change from breaking it?

Which positioning modes do they trust, and when?

static (default)
initial
absolute
fixed
relative
sticky

Last in this set: absolute positioning, explained without reciting a definition. What happens with inset: 10px, and what is the element positioning itself against?

Tell me about the z-index bug

I could ask for the definition of a stacking context. I learn a lot more by asking which bug they’ve personally hit because of one. Any of these will create one, usually when nobody’s looking:

Setting opacity to a value less than 1
Setting position to fixed or sticky
Applying a mix-blend-mode other than normal
Adding a z-index to a child inside a display: flex or display: grid container
Using transform, filter, clip-path, or perspective
Explicitly creating a context with isolation: isolate

Then a small practical problem: make a container scroll on y but not x.

I tend to reach for an outer wrapper that handles clipping and border radius, with an inner wrapper doing the scrolling. If they pick something else, good. Now there’s a real decision on the table.

By then I’m scoring against a short list in my head:

Can they explain the browser’s behaviour without sounding like MDN pasted into a human?
Can they name a bug they have actually fought?
Can they turn a visual layout problem into constraints?
Can they pair without either disappearing or taking over?

Anyone can look up the formal definition. The story about the modal that stayed behind the header despite a z-index of 9999 tells me they’ve met the browser in person.