For some reason, z-index is working for one particular element in IE8, but not in IE7 (or if I use the pseudo IE7 compatibility view while in IE8). It's working for all of the other elements. The only difference is that this element has a negative z-index, so I tried using a positive one of 1 and still, it's the only one not working.
The part that's not working is this:
.passport {
position: absolute;
left: -130px;
z-index: -2;
}
And it's attached to this image that's supposed to be underneath everything else:
<img src="http://www.blahblahblah.com/image.png" class="passport">
Everything else, has positive z-index from 2 and up (which is why I used 1 for the index when trying a positive one to see if that helped). As the code is now, this image IS underneath everything else in IE8, but like I said, not in IE7. That's not the actual path of the image, btw, I just changed it here for privacy purposes.
Any idea on what could be causing it? The only solutions I keep seeing on the web are addressing z-index that doesn't work at all or works in IE7 but not IE8 and when I find one that seems close, the solution doesn't help me because it's suggesting to use position: static (which I can't because I need this to be absolute) or other things that have nothing to do with this because it's with dropdown menus and javascript and all sort of other things in the mix.
All I'm dealing with is images stacking, nothing else. The one thing I found that might help me understand is this website, but I don't understand what it means by different stacking "context". http://css-discuss.incutio.com/wiki/Overlapping_And_ZIndex
I don't know if it would actually be relevant to my issue, but I figured I'd ask what it means in case it can help. Otherwise, the general issue is that this works in IE8 but not IE7 and I was wondering why that might be?
Again, I have searched, so if it's a simple answer I just missed it. Thanks!
