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

作者站长头像
站长
· 阅读数 6

请问低z-index的图片如何能通过拖拽穿过高z-index的图片?说明:

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

问题:

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

实际上我想实现这样的功能,如下方小程序截图所示:请问低z-index的图片如何能通过拖拽穿过高z-index的图片?

回复
1个回答
avatar
test
2024-07-09

要让一个低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">
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容