title: Z-Index and Sticky Element
body: <p>I have a sticky header on my website and a <em>Jquery Zooming</em> effect on the products. </p>
  
  <p>This two elements are in conflict actually, the zooming effect goes over the sticky header. </p>
  
  <p>I tried to reduce the <code>Z-index</code> of the Zooming effect but nothing.</p>
  
  <p>Here the link : <a href="http://www.directportes.fr/luxe-1" rel="nofollow">http://www.directportes.fr/luxe-1</a> </p>
  
  <p>I used a script to make the sticky element :</p>
  
  <p><a href="https://gist.github.com/johnnyopao/896e042fe7daac49d119" rel="nofollow">https://gist.github.com/johnnyopao/896e042fe7daac49d119</a>   </p>
  
  <p>I used another script for the zooming effect : </p>
  
  <pre><code>&lt;script&gt;
  $(function() {
    $('.zoomElevate').elevateZoom({
      zoomType    : "lens", lensShape : "round", lensSize : 200
    });
  });
  &lt;/script&gt;
  </code></pre>