html中两个图片叠放,CSS实现图片叠放（勾选图标）

场景

我们经常会遇到这种场景，有一个待选图片列表，在图片上(可能是右上角也有可能时右下角)叠放一个勾选状态图标，这篇文章就记录实现这个功能的过程。

原理

利用flex布局space-around显示图片列表

在图片的外层加一个div，同时把勾选状态图标加进去

现在的问题就是如何把勾选状态图标移到图片上(这部分可对照最后的代码看)

给图标添加一个margin-right，把图标挤过去，这要求pic-block的宽度固定，如果要到达响应式页面的效果，这个方法是肯定不行的。

将图标设置为position：relative相对定位，然后再添加right:10%让图标往左移动，这样虽然能达到一定的适应性，而且pic-block的宽度不需要固定，但是图标并未脱离文档流，所以在页面中还是会占用空间，而当有的图片有勾选图标时，有的没有图标时，布局就会不那么好看，所以这个方法使用场景也十分有限。

image.png

将图标设置为position:absolute绝对定位，再添加right:10%让图标往左移动，将pic-block设置为position:relative相对定位，这种方法能达到完全的自适应。图标的绝对定位让图标脱离文档流，使其不占用页面空间，flex布局的图片列表就能一直按照图片的空间(pic-block不设置width，其width由图片的widt