2020-02-25多层图片定位 缩放无影响

给三个图的父级相对定位
给三个图绝对定位

       <div class="center_text" style="position: relative;">
         <div class="main_title">
           <img src="../../static/img/title_3.png" alt />
           山东省分布地图
         </div>
         <canvas id="canvas"></canvas>     
         <div class="img_box" id="stars_box">
             <img id="xuanzhun" src="../../static/img/source67.svg" alt />
         </div>                   
         <div id="chart_5" style="width:100%;height:610px; z-index:99; padding:40px 40px; box-sizing:border-box;"></div>
                 
       
       </div>

css

.img_box{
   z-index: 3;
   /* position: relative;
   top: -580px;
   left: 220px; */
   position: absolute;
   top:30px;
   left: 30px;
   width: 100%;
   height: 100%;
   opacity: 0.2;
}
.img_box img{
   /* width:550px;
   height: 550px; */
   width:50%;
   height: 80%;
}

#xuanzhun{
-webkit-transition-property: -webkit-transform;
   -webkit-transition-duration: 20s;
   -moz-transition-property: -moz-transform;
   -moz-transition-duration: 20s;
   -webkit-animation: rotate 23s linear infinite;
   -moz-animation: rotate 23s linear infinite;
   -o-animation: rotate 23s linear infinite;
   animation: rotate 23s linear infinite;
}
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
   to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
   to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
   to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
   to{transform: rotate(359deg)}
}

#chart_5{
 position: absolute;
}
#canvas {
position: absolute;
/* position: relative;
top:-1120px; */
width: 100%;
height: 100%;
display: block;
opacity: .8;
z-index: 2;
padding: 20px;
border-radius: 25px;
box-sizing: border-box;
box-shadow: inset -10px 0px 15px #034c6a inset, /*左边阴影*/ 0px -10px 15px #034c6a inset, /*上边阴影*/ 10px 0px 15px #034c6a inset, /*右边阴影*/ 0px 10px 15px #034c6a inset;
}