Question

我正在尝试使用户能够将图像（例如，脸部）拖动到另一图像（例如地图方块）上。我使用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）内。相反，面部图像位于跨度区域之外，位于地图方块下方（实际上，它位于另一个地图方形图像上方，即低于实际目标的图像）。

更改脸部位置会使脸部图像位于目标的右侧（远离目标）。

我该如何解决这个问题？

Answer 1

我认为您错过了top中的left和.face-image-on-map属性。

所以我建议这样做：

.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）

希望这是你想要的：）

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

1 个答案: