JQzoom zoom window underneath next column image

Question

When I use the JQZoom plugin I have a bunch of images on a 960.gs grid....

here's an example: http://madlov.com/vintage-sunglasses

(Note: in the above link im using 'innerzoom', but if I were to use standard view, the zoomed window shows up behind the image next to it instead of on top)

I've inspected the ZoomWindow div and it has a

z-index: 5001

yet that doesn't seem to help.

why do my zoomed images appear behind other images

Answer 1

It's definitely a stacking problem. Here's some more details on how the stacking context works: https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context

I've set up a fiddle as well at http://jsfiddle.net/aAMH2/1/ that may help.

Note the style tags at the bottom of the HTML - This style overrides the stacking problem specified in the CSS. If you're having trouble modifying the Javascript, or want a quick fix, this may do it (Just change the class name to .

Another option would be to run some jQuery after the page has loaded:

$(document).ready(function() { 
$('.zoomPad').css('z-index','auto');
});

Hope this helps

Answer 2

In your application css file which seems to be getting cached or something, try setting the .zoompad z-index value to auto or getting rid of the z-index altogether. And if you're trying to get the zoomed images to appear over everything set the overflow property of .zoomWrapperImage to visible or getting rid of the overflow:hidden