I’ve bumped into something I don’t understand. I have a simple dropdown menu that appears when the "Home" link at the top of the site is hovered. The hover is created by jQuery so that it will work with IE6. In IE8/Safari/FireFox/Chrome the menu works as expected. In IE7 and IE6 the menu appears beneath an image below. Here’s what that looks like:
The image is contained in a div of class town-map that has position:relative. If I remove the position attribute, the menu works as expected. With position:relative, it does not. Unfortunately, I must keep position:relative because navigation icons are positioned absolutely on the image in the container.
I have tried various experiements with overflow and z-index, to no avail. I also tried setting position attributes on the image itself and again no help. I am considering the possibility that jQuery hover is contributing to the problem but I have not yet taken the time to test that.
Well, I said I had tried z-index on "everything" but not all combinations. Turns out I had not tried one particular class.
The page layout is basically a top banner (position:relative) and a content area. The top banner comes before the content area, so by rule it is on a lower layer. That means anything in it is on a lower layer as well. The popup is part of the top banner.
So I gave the top banner a z-index of 100 and bingo – the popup overlays the image.