antd Avatar.Group头像列表层叠顺序调整，第一个在最上面

最新推荐文章于 2024-07-08 17:09:50 发布

_必应

最新推荐文章于 2024-07-08 17:09:50 发布

阅读量182

点赞数 3

分类专栏： antd css 文章标签： css antd

本文链接：https://blog.csdn.net/jbguo/article/details/139114807

版权

css 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

antd

6 篇文章 1 订阅

订阅专栏

ant design官网在这里插入图片描述

期望修改后效果在这里插入图片描述

实现原理非常简单，修改原生css，设置层组件z-index的值(假设子元素都是div，自行修改)

.ant-avatar-group {
    > * {
      position: relative;
    }
    > div:nth-child(1) {
      z-index: 5;
    }
    > div:nth-child(2) {
      z-index: 4;
    }
    > div:nth-child(3) {
      z-index: 3;
    }
    > div:nth-child(4) {
      z-index: 2;
    }
    > div:nth-child(5) {
      z-index: 1;
    }
    > *:not(:first-child) {
      margin-inline-start: -4px !important;
    }
  }