Loading…
12
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
Log in to join the discussion
Log In2 Comments
amy_reed794mo 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?
2
logan_schmidt4mo ago
Nah, I actually think z-index works fine if you just throw enough numbers at it.
0