如何使用CSS样式叠加两张图片？

Question

我有一个包含图片的HTML表格，需要在每个图片上覆盖一个小图标。我们可以使用z-index和定位来实现这一点。

- random

---

阅读以下内容，可能会对您有所帮助： http://stackoverflow.com/questions/4863644/overlap-across-width-of-two-divs - digital

Answer 1

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

.over {
  position: absolute;
  left: 40px;
  top: 10px;
  z-index: -1;
}

<img src="https://tafttest.com/184x46.png" width="184" height="46" class="under" />
<img src="https://tafttest.com/100x84.png" width="100" height="84" class="over" />

- Jitendra Vyas

Answer 2

您可以使用position:relative，并设置right:30px和bottom:30px，这将使其向上和向左移动30像素。

CSS：

.icon{
position:relative;
right:30px;
bottom:30px;
}

- noirenex

Answer 3

你想置于顶部的元素需要具有更高的z-index值。

因此，小图标应该具有2的z-index值，而图像应该具有1的z-index值。

例如：

.icon {
  z-index: 2;
  position: relative;
  left: 30px;
  top: 30px;
}

.images {
  z-index: 1;
}

- zeckdude

Answer 4

这里有一份指南，介绍如何使用 z-index，请参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/z-index 关于定位，这是一篇文章，请看 http://www.tizag.com/cssT/position.php

- Daniel

---

那个 Mozilla 页面显示 404 错误。这是一个更新的链接：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index。 - Keith DC