I saw two sides of this bug after visiting a dental office's website in Phoenix last week - either the developer intentionally added it for a laugh because their competitor's site does it too, or it was a total CSS overflow accident that nobody caught, so which camp do you fall in: intentional trolling or sloppy coding?
Was debugging a client's site for a solid 2 hours yesterday. Their big old modal popup kept hiding behind a stupid sticky nav bar. I kept bumping the z-index up higher and higher thinking it would fix it. Then my coworker walking by said 'check if the parent has its own stacking context' and man that hit me right in the gut. Why do we always go straight for the biggest number instead of looking at the real problem?
I was building a simple card grid for a client's blog and spent a solid 3 hours trying to figure out why the hover effect on their featured post was showing behind the other cards. Turned out the z-index was getting reset by a parent container that had its own stacking context. I even yelled at my monitor twice. Then I found the fix by accident when I deleted a random position:relative on a wrapper. Has anyone else had a simple CSS trick turn into a whole afternoon of debugging?