I am working on this site: https://newsite.jcidea.com/
I have a problem with the part around the flash banner on the front page in IE. I need to position the three boxes ("products", "community support" and "health information") on top of the Flash banner (greater z-index). This works fine in Firefox and Chrome, but does not work in IE8.
What could be the problem?
This is a bug in IE where the z-index is calculated for each parent in a separate stack instead of for the whole page in a single stack as the specification dictates. IE following its own rules once again ;)
This page helped me fix the same problem a couple of weeks ago. It's usually a case of giving the parent container a higher z-index than its content.
I tried wrapping the divs in another div with z-index:3000 but it still doesn't work...
By looking at your site I see that you've added the z-index to a div inside the
.wrapper. You need to put the z-index on the
.wrapper div itself so that it can compete with it's siblings (for example the Flash content, more info below).
This is because z-index uses relative dimension and the depth is relative only to it's siblings (children elements of the same ancestor). Which basically means that any element with a z-index inside the
.wrapper div it's depth is still capped to it's ancestor. I.e. i the
.wrapper div had a z-index of 50 and the
.columns-holder a z-index of 20, the
.columns-holder will be of depth 20 inside a depth of 50. So in the case with you site, if the
ul.links would have a z-index of 30 it would still win because relative to all the children inside it's ancestor (the
#container) it still kicks the
.wrapper divs z-index of 50. It doesn't care if the children of
.wrapper has a higher z-index.
Simple as apple pie :)