在html中，你如何将图像与其他图像重叠？

Question

如何让图像重叠其他图像，我可以让文字重叠我的背景图像，但我想要在图像顶部的一系列图像。

Answer 1

只需使用z-index，该数值越高，它堆叠在堆越高（即 - 更接近观看者）：

img { 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.image1 { 
 
    z-index: 9999; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.image2 { 
 
    z-index: 999; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
.image3 { 
 
    z-index: 99; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 
.image4 { 
 
    width: 400px; 
 
    height: 400px; 
 
}

<img class="image1" src="http://gallery.photo.net/photo/6182716-md.jpg"> 
 
<img class="image2" src="http://gallery.photo.net/photo/12682192-md.jpg"> 
 
<img class="image3" src="http://gallery.photo.net/photo/2568318-md.jpg"> 
 
<img class="image4" src="http://gallery.photo.net/photo/6506352-lg.jpg">

Answer 2

img { 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: -1; 
} 

z-index的值越高越好。

Answer 3

那么，如果你只想在背景图片上面放置一张图片，那么就把你的图片放在你拥有的任何内容中。 如果您希望图像覆盖图像，请使用z-index

将z-index应用于每张图像，其中最高的图像为“最高”图像。

Z-index: 1; 
Z-index: 2; 
Z-index: 3; 

等等等等