In html how do you have an image overlapping an other image?

This question already has an answer here:

How to overlay one div over another div 6 answers

---

简单地使用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">

---

Well, if you only want an image above your background image, then just place your image in what ever content you have. If you want images over images, use z-index

Apply a z-index to each of your images, with the highest number being the "highest" image.

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

Etc etc.

---

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

z指数的值越高越好。

链接地址: http://www.djcxy.com/p/75842.html

上一篇: Div在flex容器中覆盖其他div

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