如何修复在缩放图像上重叠的按钮

Question

我正在使用此插件： https://www.npmjs.com/package/js-image-zoom 并且可以很好地进行缩放，但是在使用缩放时，按钮在缩放上重叠

我正在使用expressjs和jquery以及npm安装的插件

图片

<div class="col-sm-6 col-md-8 col-lg-6">
                <!-- Product -->
                <h1> <%= productDetail.nombre %> </h1>  
                <h6 class="p-b-20"> Referencia  <%= productDetail.id %> </h6>  
                <div id ="contenedor-imagen" style="width: 400px">
                    <img src=" <%= productDetail.ruta %> "> 
                </div> 

                <script>
                        var options = {
                        width: 400,  
                        zoomWidth: 400,
                        zoomDefaultPosition: "false",
                        zoomPosition: "left",
                        opacity: 0.1,                   
                    };
                    new ImageZoom(document.getElementById("contenedor-imagen"), options); 

                        </script>
                <span>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam quod enim ut esse, nemo distinctio, dolorum sequi minus, quas odit magnam? Dicta tempore fugiat, natus sint eligendi est cupiditate ea.</span>

            </div>

按钮

<div class="col-sm-6 col-md-8 col-lg-2" style="position: relative">
                <h4 class="p-b-20">Cantidad</h4>
                <div class="flex-w bo5 of-hidden w-size17">
                    <button class="btn-num-product-down color1 flex-c-m size7 bg8 eff2">
                        <i class="fs-12 fa fa-minus" aria-hidden="true"></i>
                    </button>

                    <input class="size8 m-text18 t-center num-product" type="number" name="num-product1" value="1">

                    <button class="btn-num-product-up color1 flex-c-m size7 bg8 eff2">
                        <i class="fs-12 fa fa-plus" aria-hidden="true"></i>
                    </button>
                </div>
                <div class="p-t-20" id="divAgregar" style="position: relative">
                    <button  type="button" class="btn btn-danger" id="btnAgregar" style="position: relative">
                        Agregar al Carrito
                    </button>
                </div>

            </div>

结果Button Overlap Zoomed area

感谢任何建议！