title: Using ElevateZoom but zoom comes always behind the img
body: <p>I use elevate zoom plugin and i have an issue with the zoom. I have one container div which holds all the content and a mainDiv which holds the background image of the page  then i try to put a div toZoom but the zoom lens shows always behind the img(behind div toZoom) and in-front of MainDiv..Have anyone had something simular and how to solve it? </p>
  
  <pre><code> &lt;div id="container" style="width:100%;height:100%;position: relative;"&gt;
     &lt;div id="MainDiv" style="overflow:hidden;position:absolute; background:url(../Background2.jpg); width:100%;height:100%;background-size:100%;background-repeat:no-repeat;"&gt;
  &lt;div style=" padding-top:20px; padding-left:20px;border-radius: 10px;width:450px;height:605px;background-color:#FFFFFF;opacity:1;z-index:2; left:calc(0.7% + 451px);top:10px; position: absolute;"&gt; 
      &lt;img id="toZoom"   data-zoom-image="icon1.jpg" width="440px" height="600px" margin="10px" src="icon1.jpg" alt=""/&gt;
  &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>