通过 CSS 和 JS 的两个重叠图像答案

【问题标题】：Two overlapping images via CSS and JS通过 CSS 和 JS 的两个重叠图像
【发布时间】：2016-09-26 17:34:42
【问题描述】：

我正在尝试使用户能够将图像（例如人脸）拖到另一个图像（例如地图正方形）上。我使用 Angular 指令实现了拖放，它有点工作。不工作的是放置图像（面部）的位置：它没有覆盖，而是放置在地图方块下方。

起始 HTML 代码是通过 ng-repeat 生成的，但生成的元素是这样的：

<span style="display: inline-block;position:relative;">
      <img src="map_square.jpg" class="map-image">
</span>

放下的时候变成：

<span style="display: inline-block">
      <img src="map_square.jpg" class="map-image">
      <img src="face.jpg" class="face-image-on-map">
</span>

这是我的 CSS 代码：

.map-image {
  position: relative;
  max-width: 42px;
  z-index: 0;
}

.face-image-on-map {
  position: absolute;
  width: 100%;
  max-width: 42px;
  z-index: 100;
  opacity: .8;
}

因此，我希望人脸图像位于地图正方形上方，两者都在跨度分隔区域 (42*42px) 内。相反，人脸图像位于跨度区域之外，位于地图方块下方（实际上，它位于另一个地图方块图像之上，即实际目标下方的那个）。

改变人脸位置会导致人脸图像被放置在目标的右侧（远离目标）。

我该如何解决这个问题？

【问题讨论】：

尝试切换位置：绝对和位置：相对。
这不是一个选项：改变地图方块的位置会导致全局变化（即所有地图方块在一个位置重叠）
关于类名的问题：两个img 标记具有相同的类，因此您的示例中未使用.face-image-on-map。对吗？
@TuringTux 谢谢，我更正了我的 OP。

标签： javascript html css

【解决方案1】：

我认为您缺少 .face-image-on-map 中的 top 和 left 属性。

所以我会推荐这个：

.face-image-on-map {
  position: absolute;
  top: 0; /* Positoning: distance from top border */
  left: 0; /* Positioning: distance from left border */
  width: 100%;
  max-width: 42px;
  z-index: 100;
  opacity: .8;
}

（有关详细信息，请参阅W3Schools page）

希望这是你想要的:)

【讨论】：

正确！我在玩，只是想不通。实际上，我还需要 position:relative 在包含的 span 元素上。我将它添加到 OP 中。
没问题 :) 很高兴能帮到你。我将添加一个指向 W3Schools 页面的链接，以防以后有人需要。