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?

4 answers

danwellman 5600

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.

Answered over 8 years ago by danwellman

I tried wrapping the divs in another div with z-index:3000 but it still doesn't work...

Answered over 8 years ago by Maidomax
  • did you read the post I linked to? It explains this bug and how to fix it in great detail :) danwellman over 8 years ago

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 :)

Answered over 8 years ago by Jens Hedqvist
  • I think I understand what you mean. Does that mean that I can't position the boxes on top of the Flash with this markup if the #wrapper div is positioned below it? Maidomax over 8 years ago

Have you tried setting wmode to opaque, this forum post says that works.

Answered over 8 years ago by Divya Manian
  • yeah this was set in his code.... danwellman over 8 years ago
  • Great answer, but you could have checked yourself if he did by following the link Maidomax provided. There you would se that yes he has tried that. I'm not trying to be a bastard here, I'm just interested in optimizing the answers given on this site (I'm hopelessly damaged by code optimizing i guess... :) ). Jens Hedqvist over 8 years ago