[css]图片重叠显示

公司让使用图片来作柱状图样式显示比例，大概样式如下：

图片：TIM截图20190418163053.png

上图是使用两张图片叠在一起，通过宽度进行的显示，灰色图片在下边，蓝色图片在上边，蓝色图片通过百分比来覆盖在灰色图片上边。代码如下：
html：

<div style="width:65px;height:16px;position:relative;overflow:hidden;display:inline-block;margin-left:10%">
        <div class="stuImg" style='width:60%;'>
            <img src="images/usePerson.png" alt="" style="position:absolute;left:0;width:auto;height:100%;top:0px;z-index:30">
        </div>
        <img src="images/unUsePerson.png" alt="" style="position:absolute;left:0;top:0px;z-index:20;width:100%;">
    </div>

css：

.stuImg {
           height: 16px;
           position: relative;
           overflow: hidden;
       }

上边是按照html+css来完成的，实际项目中我是放在vue中使用的，在vue中使用:style 来进行的宽度绑定，以下是我在vue项目中的代码：

<div class="stu_num1" style="position:relative;" v-for="(item,index) in this.studentData" :key="index">
      <span class="stu_area">pw_item.areaName</span>
            <div style="width:65px;height:16px;position:relative;overflow:hidden;display:inline-block;margin-left:10%">
             <div class="stuImg" :style='{width:item.rate +"%"}'>
                 <img src="../../../static/images/usePerson.png" alt="" style="position:absolute;left:0;width:auto;height:100%;top:0px;z-index:30">
             </div>
                  <img src="../../../static/images/unUsePerson.png" alt=""  style="position:absolute;left:0;top:0px;z-index:20;width:100%;">
             </div>
 <span class="stu_num2">pw_item.useQuantity人</span>
         </div>                        
     </div>

维老板，有做出来的效果图嘛