Html 用z索引重叠两幅图像？

我在div元素中有一个图像：

<div class="full-width">
    <img src="images/products/product1.jpg" />
</div>

我想添加第二个名为frame.png的图像，但与背景图像不同

<img src="images/products/frame.png" />

我想将image product1.jpg与frame.png重叠，这样看起来frame.png就好像是在prduct1.jpg上

这是否可能与z-索引一起使用，但不能作为背景图像，因为我在响应设计中使用了它

最后，我想得到如下东西：

<div class="full-width">
    <img src="images/products/product1.jpg" />
    <img src="images/products/frame.png" />
</div>

---

如何做到这一点？

假设porduct1.jpg有#产品id和frame.png#frame id 现在,

如果

.full-width {position:absolute;}
#product, #frame {position:relative;}

---

此外，您还可以根据#帧宽度为#产品设置顶部和左侧，+z-index

首先在css中将div设置为

位置：相对

，将图像设置为

位置：绝对

。然后设置z索引，例如，如果希望图像1位于图像2上方，则将其z索引设置为高于图像2。

<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;
}

.全宽{
位置：相对位置；
宽度：300px；
高度：200px；
}
img.imgone{
位置：绝对位置；
宽度：300px；
高度：200px；
}
img.imgtwo{
位置：绝对位置；
宽度：80px；
高度：80px；
顶部：10px；
右：10px；
}

---

对于

全宽
给出
位置：相对
，对于内侧
img
给出
位置：绝对
。使用各自的顶部、左侧对齐。。属性。在要显示的图像上使用z索引。我想那会管用的。但是，在响应性设计中显示重叠的图像是一个坏主意。
看看响应性图像。我建议不要将图像以响应性设计相互叠加！我对使用这种方法将图像定位在需要整体响应的位置的设计概念有过不好的体验。在整个设计过程中，你需要花费大量的时间在一些小的改变上。你需要添加一些css。将div设置为
位置：相对
，将图像设置为
位置：绝对
。然后图片相互覆盖，您可以调整位置，包括左、右、上、下以及z-索引。顺便说一句：-请提供更多详细信息和上下文，以便我们提供有用的答案。你试过什么？显示一些CSS！我是这样做的：）我不会让包装纸如此绝对。这很容易破坏外部设计。最好是相对的，没错。我的错误。把容器弄乱了。这正是我想说的！：（祝贺你在StackOverflow上的第一个回答！