Found a z-index bug on a local news site yesterday

I was reading an article about road construction on my city's news site. A huge cookie consent banner popped up and covered half the text. I tried clicking the X button but it kept going behind the article body. Looked at the dev tools and saw the banner had z-index set to 999 but a random sidebar ad had z-index 1000. The ad was actually overlapping the banner because nobody checked the stacking order. This was on their main site header too, not some random page. It took me 20 seconds to fix in my browser but I bet thousands of visitors just closed the page. Have you guys ever found a simple CSS bug on a major site that should have been caught in QA?

1 comments

1 Comment

burns.brooke23h ago

Right, because nothing says "we value your privacy" like fighting with a sidebar ad for screen real estate. I actually ran into something similar on a big travel site, except their floating chat widget had a z-index of 9999 and their sticky header had 9998. Every time I scrolled down the header would just vanish under the chat button. Real pro design work there.