为什么绝对定位会重叠在一起

今天工作遇见一个bug，卡了很久，特此总结一下

业务需求，需要在图片上，添加div模式按钮点击，切换图片和页面,我思路使用定位子绝父相实现

然后：

只可以看到一个盒子，其实有4个盒子，重叠起来了

再看代码：

 <div class="tab-show" v-for="(item,index) in tabsCutList" :key="index">
        <div class="btn"  @click="tabShow=index">{{index}}</div>
      </div>

  .tab-show{
      position: absolute;
      display: grid;
      grid-template: repeat(1, 1fr) / repeat(4, 1fr);
      width: 7.5rem;
      height: 0.81rem;
      /* background-color: red; */
    }
    .btn{
      background-color: red;
    }

可以看到我把我把循环加到，相对定位得这个标签了，v-for循环是自循环，所以会出现4个相对定位得div，而他得孩子只有一个

再看正确代码：

<div class="tab-show" >
        <div class="btn" v-for="(item,index) in tabsCutList" :key="index"  @click="tabShow=index">{{index}}</div>
      </div>

我把循环放到了定位标签里面，所有此时只有一个定位标签，而他有4个孩子

完美解决

中…(img-s2b2X5Q6-1645119529443)]

完美解决