Vue中循环了element-ui的多个内置Icon图标在设置绝对定位后重合的解决办法——（设置绝对定位后图标重叠的解决办法）

解决办法：加个父元素，用来设置相对定位

当前html代码：（大致就是根据接口将数据给了navTree，用v-for循环出来，想在每个循环的li后加个icon图标）

<li v-for="(item, index) in navTree" :key="index">
  <span class="itemname"> {{ item.name }}</span>
  <span v-for="(ite, inde) in item.child" :key="inde" class="namechild">
     {{ ite.name }}
  </span>
  <i class="el-icon-caret-right icon"></i>
</li>

当前展示图为：

想把所有右箭头统一放在li的末尾，想用绝对定位。发现所有图标重合了，以为是没加宽高的原因，然后加上也没用。图示如下：

.icon{
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;
}

就想到加个父元素，限制他漂的位置。也就是说以此父元素作为相对定位，来进行绝对定位。

<div class="iconbox">
   <i class="el-icon-caret-right icon"></i>
</div>

 css代码如下

.iconbox{
    position: relative;
}
.icon{
    width: 10px;
    height: 10px;
    position: absolute;
    top: -28px;
    left: 250px;
}

最后结果为：