z-index上层元素遮挡下层元素点击事件解决

一、问题描述

有一个地图页面，地图上面添加了div样式z-index:1遮盖了地图z-index:0，导致此部分地图无法实现拖拽和缩放。

二、解决方案

对上层元素使用：
pointer-events: none; /元素永远不会成为鼠标事件的target（目标）/
这样点击事件就能穿透上层元素，
但若是你想让上层元素也能得到点击事件，又该怎么办呢？
只需要在你需要获得点击的上层元素子元素中加入：
pointer-events: auto;