使用ElevateZoom，但縮放總是在後面img

Question

我使用升級縮放插件，我有一個縮放問題。我有一個容器div，其中包含所有內容和一個mainDiv，其中包含頁面的背景圖像，然後我嘗試將div放到Zoom中，但變焦鏡頭始終顯示在img後面（div toZoom後面）和MainDiv的前面。 。有沒有人有類似的東西，以及如何解決它？

<div id="container" style="width:100%;height:100%;position: relative;"> 
    <div id="MainDiv" style="overflow:hidden;position:absolute; background:url(../Background2.jpg); width:100%;height:100%;background-size:100%;background-repeat:no-repeat;"> 
<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;"> 
    <img id="toZoom" data-zoom-image="icon1.jpg" width="440px" height="600px" margin="10px" src="icon1.jpg" alt=""/> 
</div> 
</div> 

Answer 1

https://github.com/Regaddi/elevatezoom/commit/93028ada9814c35cd3ac0bfb037e5904c0d7a4c6

只是要在elevateZoom.js此行文件

self.zoomWindowContainer =$('<div/>').addClass('zoomWindowContainer').css("width",self.options.zoomWindowWidth); 

與此：

self.zoomWindowContainer = $('<div/>').addClass('zoomWindowContainer').css({ 
     "width": self.options.zoomWindowWidth, 
     "z-index": 999 
    });