How to get a highslide custom overlay Z-index to work?

Question

I have implemented highslide custom overlay to contain a 'next' and 'previous' links to navigate between images. I need the links to be relative to the screen because I'm doing a responsive website. So I set hs.registerOverlay({ relativeTo: 'viewport' });. But then what happens is that the 'next' and 'previous' links always appear under the expander, regardless of the Z-index I force to any of the containing elements. How to get the Z-index to work?

Answer 1

I don't think you can address this with z-index values, because both objects (expander and overlay) are being rendered by the Highslide script itself, and it imposes its own stacking order.

The easiest fix for this problem is simply to restrict the size of the expander. Let's say your links are being placed at the bottom of the viewport, and they're 30px tall. Change hs.bottomMargin from the default 15 to 45, and you'll be fine.