我在div元素中有一个图像：
<div class="full-width">
<img src="images/products/product1.jpg" />
</div>
我想添加第二个名为frame.png的图像，但不像背景图像！
<img src="images/products/frame.png" />
我想将product1.jpg图像与frame.png重叠，这样它看起来就像frame。png在product1.jpg上。
这可能是z索引，但不是作为背景图像，因为我在响应设计中使用它吗？
最后，我想得到这样的东西：
<div class="full-width">
<img src="images/products/product1.jpg" />
<img src="images/products/frame.png" />
</div>
如何做到这一点？
假设porduct1.jpg有#product-id和frame.png#frame-id现在，
如果
.full-width {position:absolute;}
#product, #frame {position:relative;}
此外，您根据#框架宽度设置#产品的顶部和左侧。，+z索引
<div class="full-width">
<img class="imgone" src="http://s23.postimg.org/b2h2rz457/image.png" />
<img class="imgtwo" src="http://s13.postimg.org/jlyzyofkn/image.png" />
</div>
.full-width {
position: relative;
width: 300px;
height: 200px;
}
img.imgone {
position:absolute;
width: 300px;
height: 200px;
}
img.imgtwo {
position:absolute;
width: 80px;
height: 80px;
top: 10px;
right: 10px;
}
查看此演示
首先在css中将div设置为position:relative，将图像设置为position:absolute。然后设置z索引，例如，如果您希望图像1在图像2之上，则将其z索引设置为高于图像2。
给full-width position:relative，给内部img position:absolute。使用各自的左上方对齐。。属性。对要显示的任何图像使用z索引。我认为这会奏效。但是，在响应式设计中显示图像重叠是个坏主意。