我们如何使用 css 样式重叠两个图像？答案

【问题标题】：How can we overlap two images using css style?我们如何使用 css 样式重叠两个图像？
【发布时间】：2010-12-19 10:47:53
【问题描述】：

我有一个 html 表格中的图像列表，需要在每个图像上重叠一个小图标。我们如何使用 z 索引和定位来做到这一点？

【问题讨论】：

阅读此文可能对您有所帮助stackoverflow.com/questions/4863644/…

标签： html css image

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

【讨论】：

【解决方案2】：

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

CSS：

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

【讨论】：

【解决方案3】：

你想要置顶的元素需要有更高的 z-index

所以小图标的 z-index 为 2 并且图像的 z-index 为 1

例子：

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

.images {
  z-index: 1;
}

【讨论】：

【解决方案4】：

这里是关于你可以使用 z-index 的指南和这里 https://developer.mozilla.org/en/understanding_css_z-index

一篇关于定位的文章 http://www.tizag.com/cssT/position.php

【讨论】：

那个 Mozilla 页面产生 404。这是一个更新的链接。 developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/…