IE 6 & 7 z-index Bug

Another annoying issue today.

I’m updating one of our brand websites to include a hover-over drop-down menu to its navigation. I was really proud of myself yesterday for doing this simply without the aid of any JavaScript or jQuery but our QA engineer discovered that the menus were getting covered by other elements lower down on the page in IE 6 and IE 7.

Urgh.

After fiddling with the z-index of the menu element itself, I finally did a cursory search on Google and found quite the peculiar fix for this problem. I’m sure this is old news to the web gurus out there but I’ve been out of the loop for a few years on recent IE hacks and workarounds since I’ve mostly dove into Ruby on Rails coding full-time.

The trick to this fix is to make the parent element’s z-index higher than the child element that is having the problem. And not just the immediate parent of the child element, but the closest parent that has the relative positioning attribute defined. For me, this was 3 or 4 levels higher than my absolutely positioned child element.

Can I stop supporting IE 6 & 7 yet?

More information on the fix: Relative, z-index, and IE