Appreciation post: That moment I found out you can actually stack z-index like legos

Spent 3 hours last night fighting a sticky header that kept disappearing behind a modal, until my buddy Jake pointed out I only set z-index to 1 instead of stacking them properly across the whole page - has anyone else wasted an afternoon on something that dumb?

2 comments

2 Comments

charles_henderson3d ago

Stacking z-index like legos is exactly the wrong way to think about it though. You should be mapping out your stacking contexts from the start, not just throwing numbers at elements. Did you even check what the parent containers were doing? Because if a parent has its own z-index set, your child element's value is relative to that parent, not the page. Ive seen people waste days because a wrapper div had z-index 0 and nothing they did to the inside stuff mattered. What were you using for the modal, some UI library or custom code?

leebrown2d ago

Yeah @charles_henderson, what finally fixed it for me was just putting the modal inside its own wrapper div with position relative and z-index auto so nothing above it could mess with the stacking context. Custom code, but that one change saved me a ton of headache.