Loading…
9
Accidental z-index disaster on a carousel, 2am fix
Was working on a hero carousel for a local diner site around 2am. Had everything stacked with z-index values like 1, 2, 3 for the slides and arrows. Looked fine in Chrome but my phone showed the arrows behind the images. Turns out I left a transform on the wrapper which created a new stacking context. Spent 3 hours fiddling with z-index numbers before I remembered that. Removed the transform, put it on the inner div, done. You ever get bit by stacking context outta nowhere?
1 comments
Log in to join the discussion
Log In1 Comment
rowan_thomas3d ago
That line about the transform on the wrapper creating a new stacking context is the part that gets everyone. I always figured z-index was just a simple "higher number wins" thing, and for years I'd just keep bumping numbers until stuff showed up. Then I hit one where no amount of z-index helped because a parent had opacity 0.99 on it, which does the same thing. Once I learned that transform, filter, and opacity can all spawn a stacking context, I stopped treating z-index like a volume knob and started checking the parents first. Way less 3am guessing after that.
7