z-index Issue/Question

I'm using the Photoswipe to display images on my ecommerce site (currently in development). I recently purchased Nop Element and am having issues integrating Photoswipe with Nop Element. The issue is that when a thumbnail is clicked and the full sized image is opened in full-screen mode, certain Nop Element DOM elements are positioned above the image, obscuring parts of the photograph.

Here is a link to an imgur photo demonstrating this issue


Can placement of these elements somehow be de-prioritized so that they do not appear on top? It is strange that some elements (such as the title area) do not present this issue but others (such as the newsletter textbox) do. Any help would be greatly appreciated.

Hello jirwin,

technically you can decrease the z-index values of any elements in your theme, but this is not recommended at all. There are multiple elements stacked into a specific z-index hierarchy in the theme and decreasing any existing z-indexes could lead (and most probably will) to problems.

The better approach is to try to increase the z-index value of the Photoswipe image (or its placeholder). Usually we are using z-index values of up to 1200 in our themes, so a value higher than that will do the job.


Regards