html - 用 z-index 重叠两个图像？

Question

我在 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超过了prduct1.jpg。

z-index 是否可能，但不能作为背景图像，因为我在响应式设计中使用它？

最后我想得到类似的东西：

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

怎么做？

Answer 1

首先在你的css中设置divposition:relative和你的图像。position:absolute然后设置 z-index 例如，如果您希望图像 1 高于图像 2，则将其 z-index 设置为高于图像 2。

Answer 2

给position:relative，full-width给position:absolute里面img。使用各自的 top,left.. 属性相互对齐。在要显示的任何图像上使用 z-index。我认为这会奏效。但是在响应式设计中显示重叠的图像是一个坏主意。

Answer 3

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

看看这个演示

Answer 4

假设 porduct1.jpg 有 #product id 和 frame.png #frame id 现在，

如果

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

此外，您根据#frame width.., + z-index 为#product 设置顶部和左侧