0
点赞
收藏
分享

微信扫一扫

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

zhaoxj0217 2022-02-18 阅读 67

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

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

然后:

image-20220218012922377

只可以看到一个盒子,其实有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个孩子

image-20220218013721666

完美解决

中…(img-s2b2X5Q6-1645119529443)]

完美解决

举报

相关推荐

0 条评论