Search code examples
jquerycssz-indexsticky

Z-Index and Sticky Element

I have a sticky header on my website and a Jquery Zooming effect on the products.

This two elements are in conflict actually, the zooming effect goes over the sticky header.

I tried to reduce the Z-index of the Zooming effect but nothing.

Here the link : http://www.directportes.fr/luxe-1

I used a script to make the sticky element :

https://gist.github.com/johnnyopao/896e042fe7daac49d119

I used another script for the zooming effect : 

<script>
$(function() {
  $('.zoomElevate').elevateZoom({
    zoomType    : "lens", lensShape : "round", lensSize : 200
  });
});
</script>
Solution

  • I checked it and i saw that you are trying to use z-index with position fixed. Check this stack overflow question to understand more for that and how to fix