Three hours on a hover effect that was fighting itself the whole time

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?

2 comments

2 Comments

amy_reed796d ago

Went through that exact nightmare last month with a navigation menu. The dropdown was hiding behind the logo no matter what z-index I threw at it. Finally realized the logo's parent had an opacity filter on hover that created a fresh stacking context. Deleted the filter, used a different hover effect entirely, and it worked first try. Still mad about the wasted time but at least I learned something. What was your fix once you found the issue?

logan_schmidt6d ago

Nah, I actually think z-index works fine if you just throw enough numbers at it.