【CSS】实现图片（头像）堆叠效果

期望的效果：

 

实现思路：

横向排列图片，将每个图片容器的margin-right设置为负值，让其右边元素向左移动一段距离，根据层叠关系，设置对应的 z-index，注意给每个图片设置 position，否则 z-index 不生效

margin为负值的时候，有两种情况，left 和 top为负值，以外元素作为参考线；right，bottom为负值，以自身作为参考线

 

参考：浅谈margin负值 - 知乎 (zhihu.com)

代码：zjy4fun/image-stacking-effect: CSS实现图片堆叠效果 (github.com)