在 html 中，如何让图像与其他图像重叠？ [复制]答案

【问题标题】：In html how do you have an image overlapping an other image? [duplicate]在 html 中，如何让图像与其他图像重叠？ [复制]
【发布时间】：2016-10-13 23:47:35
【问题描述】：

你如何让一个图像与另一个图像重叠，我可以让文本与我的背景图像重叠，但我想要在该图像之上的一系列图像。

【问题讨论】：

在 CSS 中使用 z-index
论据不佳。试着提出一个更有争议的问题，没有人会猜到你想要什么，

标签： html css

【解决方案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">

【讨论】：

【解决方案2】：

好吧，如果您只想要背景图片上方的图片，那么只需将图片放在您拥有的任何内容中即可。如果你想要图像而不是图像，请使用 z-index

为您的每张图片应用 z-index，数字最高的图片为“最高”图片。

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

等等等等

【讨论】：

【解决方案3】：

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

z-index 的值越高排在前面。

【讨论】：