请问低z-index的图片如何能通过拖拽穿过高z-index的图片？

Question

说明：

截图中两张图片使用了position来实现拖拽的，图片外星人z-index高于qq，qq图片拖拽时接触到外星人时会卡住，不知道如何才能穿过外星人。动态更改两者的z-index，将鼠标选中的对象的z-index设置为最高，理论上也是可行的，但感觉不对味。

问题：

如何才能实现低z-index穿过高z-index，请大佬们指点。

实际上我想实现这样的功能，如下方小程序截图所示：

Answer 1

要让一个低z-index的图片能够穿过一个高z-index的图片，需要使用CSS属性pointer-events。这个属性可以控制元素是否可以响应鼠标事件，包括鼠标点击、滚动、拖拽等。

默认情况下，元素的pointer-events属性值为auto，表示元素可以响应鼠标事件。但如果将它设置为none，元素将无法响应鼠标事件，包括拖拽事件。因此，我们需要将高z-index的图片的pointer-events属性设置为none，以便让低z-index的图片可以通过它。

以下是一个示例，假设我们有两个图片元素，其中一个z-index为1，另一个z-index为2，且2在1的上方。为了让1可以穿过2，需要设置2的pointer-events属性为none：

<style>
  .image1 {
    z-index: 1;
  }
  
  .image2 {
    z-index: 2;
    pointer-events: none;
  }
</style>

<img class="image1" src="image1.jpg">
<img class="image2" src="image2.jpg">

Answer 2

就你的这个来说可以注册事件当鼠标拖拽时提高目标的z-index, 鼠标松开时z-index复原就可以了, 你问的那个小程序这种的一般使用canvas等, 不会单独送CSS+div写的:
https://www.bilibili.com/vide...