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

一、问题描述

笔者是在些一个登录界面时遇到这个问题的，需求是点击登录按钮出现登录悬浮框，初始化时登录悬浮框是display:none的，但笔者发现登录框那一块区域的input框无法响应点击时间，也无法获得焦点。

一般鼠标放在input框上是会变成编辑的横杠，input框也会获得焦点。

二、解决方案

对上层元素使用：

pointer-events: none;

这样点击事件就能穿透上层元素，

但若是你想让上层元素也能得到点击事件，又该怎么办呢？

只需要在你需要获得点击的上层元素子元素中加入：

pointer-events: auto;

即可！

截取鼠标的截图有些麻烦，这次就不上图了，遇到这个问题的小伙伴应该能看懂的。