avalon怎么让重叠的图片改变显示层级?

  <span style="display: inline-block;width:20%;">  
           <span style="display: inline-block;width:100%;color: #9da1aa;vertical-align: top">中选</span>
           <span style="display: inline-block;width:100%;color: #9da1aa;vertical-align: top">名单</span>
  </span> 
 <span style="display: inline-block;width:80%;padding-left: 0.5rem;position: relative;position: relative;
    top: -1rem;">
     <span ms-css="[{backgroundImage: 'url('+item.image + ')'},{left:($index*1.5)+'rem'},{zIndex:10-$index}]" ms-for="($index,item) in el.awardUserList.userlist" ms-if="$index <= 3" class="try-headimg" 
      style="margin-left: -4%;width: 1.6rem;
    height: 1.6rem;position: absolute;top:-0.8rem" ></span>                     
 <span  class="try-headimg"  ms-css="{backgroundImage: 'url('+@img1 + ')'}" style="margin-left: -7%;width: 1.6rem;height: 1.6rem;display: inline-block;background-color: white;position: absolute;top:-0.8rem;left:6rem;z-index: 6;" 
ms-visible="el.awardUserList.userlist.length>3">
 </span>

这里有几点需要注意

1.超过4个就显示最后的三个点ms-visible="el.awardUserList.userlist.length>3"  

2.这里的话如果让第一个显示为最高层级{zIndex:10-$index}要用到驼峰命名法Zindex,不然根本不显示。。。。

3.这里有用到层级,所以必须用定位来做,{left:($index*1.5)+'rem'},