图片列表重叠(梁王的开发笔记)

今天有个需求，是实现如下的效果。

设计图.png

可以看到一个图片与另一个图片叠在一起有重合。

首先既然要重叠，那我们肯定要用到绝对定位.
CSS版的话，可以发现，光2个图片重叠我们就要单独为每一个元素设置对应的right,这就很日狗了。

好在项目里使用的sass，下面是代码，这里只限定了4个，读者可以自行修改或者引入一个参数

@for $i from 0 to 4 {
    .eventcard-friends-avatars-item:nth-child(#{$i}) {
        right: 20px * $i;
        z-index: 4-$i;
    }
}

效果图如下

no title.png