So, IE is fun. IE7 and older handle z-index slightly differently to newer browsers (Reference).
In IE7, each element with an assigned z-index creates a new stacking context. This means any elements z-index nested within it are stacking in relation to the parent element.
A simple example:
<div id="container-one" style="z-index: 1;">
<p id="para-one" style="z-index: 99999;">Paragraph One</p>
</div>
<div id="container-two" style="z-index: 2;">
<p id="para-two" style="z-index: 1;">Paragraph Two</p>
</div>
In this example, #para-two
would be above #para-one
. "But #para-one
has a huge z-index, it must be above everything". #container-one
has a z-index lower than #container-two
. They are now separate stacking contexts.
#para-one
's z-index is only in relation to everything within #container-one
.
Also, for extra fun, opacity
creates a new stacking context as well!!
Ok, for your code, I had to guess a little as to what the full html was because you didn't make a FIDDLE!!!. I got it working here in IE7, just to give you an idea as to what you need to change.
Fiddle
I've set the .zoomImg
to have a z-index higher than it's sibling .div
elements. Note, I removed opacity
and added a z-index
instead. This is to forcefully assign a higher z-index
. You can put it back in, but remember opacity
creates a new stacking context in IE7. That means if you give an element an opacity
, it's z-index
and it's children are seperate from it's current context. Welcome to IE7, have a nice time.
EDIT: IE7 needs a different property for opacity --
filter: alpha(opacity=50);
- SOURCE