css两张图片重叠显示

很多时候我们需要做一些多张图片重叠显示的效果，例如商品列表中 图片上放置已售磬 已下架等标识，很多时候不少初学者不知如何操作，下面就由我来告诉你如何操作

第一步：做一个div容器，把需要重叠显示的图片都放置到这个容器里

第二步：容器设置相对定位和width height

例子：position:relative;width:500px;height:500px;

第三步：叠加图片设置绝对定位

例子：position:absolute;width:100%;height:100%;top:0;left:0;

这样就设置了一个完全重叠的效果，如果不是设置完全重叠 那么top left改成自己喜欢的参数即可 当然width height也要同步修改 不然会溢出

完整代码：

<div style="position:relative;width:500px;height:500px;"><img src="1.jpg" style="width:100%;height:100%;" /><img src="width:100%;height:100%;position:absolute;top:0;left:0;"/></div>