如何解决上层div元素将下层div元素盖住，但是下层div里的点击事件仍可以进行的问题?

一.实例分析

现在我们需要实现一个div文本输入框,其中含有button按钮在下层，上层div覆盖住下层div元素，上层div中同样含有一个button按钮的效果图。我们应该如何做来使下层div里的button点击事件有效果呢?

---

二.知识点整理

在解决这个问题之前，让我们先了解与解决这个问题有关的一些知识点。

(1).pointer-events直译为指针事件，是一个与javascript有关的属性。
pinter-events中有两个与javascript有关的属性值为auto和none，其余属性暂且与javascript无关。
auto——效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。
none——元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。
(2).pointer-events:none可以直接让鼠标事件无效，但是，其并不能让键盘事件无效。
从别的资料上看到的一个形象的观点是:
可以将pointer-events:none理解为“幻影特性”。pointer-events:none的作用是让元素实体“虚化”。例如一个应用pointer-events:none的按钮元素，则我们在页面上看到的这个按钮，只是一个虚幻的影子而已，您可以理解为海市蜃楼，幽灵的躯体。当我们用手触碰它的时候可以轻易地没有任何感觉地从中穿过去。一切都是幻影!
(3).pointer-events:none;的作用:

• 阻止用户的点击动作产生任何效果

• 阻止缺省鼠标指针的显示

• 阻止CSS里的 hover 和 active 状态的变化触发事件

• 阻止JavaScript点击动作触发的事件

(4)pointer-events:auto的应用案例：

• 提交页面，提交按钮点击后，添加这个样式属性（style=“pointer-events”），来防止重复提交。
• 一些层的绝对定位，覆盖按钮，穿透可以点击它。例如：在许多网站上过节的时候页面最上层会用canvas绘制的雨、雪花，避免这些悬浮物遮挡住页面从而影响鼠标点击，可以使用pointer-events=none属性，让这些上方的canvas不会遮挡鼠标事件，让鼠标事件可以穿透上方的canvas来点击页面。

(5)a标签应用disabled属性是无法阻挡任何鼠标经过或是点击事件的（虽然IE下置灰但实际上，在绝大多数浏览器下，a标签应用disabled可以禁用键盘事件（避开tab键的索引)。
如果我们想要实现禁用a标签链接或按钮。
实现这一功能的方式是：pointer-events:none & without href
示例代码如下:

 年终奖

(6)z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
z-index 仅能在定位元素上奏效（例如 position:absolute;）

---

三.解决方案

• 一般来讲，两个div元素叠加在一起，只有上层的点击事件才起效果，但有时我们想要实现下层元素点击事件起作用。可以有以下方法:
• 方法一(推荐方法)
  对上层元素使用：pointer-events: none;这样点击事件就能穿透上层元素，找到下层的点击事件。
  如果想让上层元素也能得到点击事件，只需要在你需要获得点击的上层元素子元素中加入：pointer-events: auto;理由请看二.(1)。
  示例代码:

 
  
  
  
 
 
  

      姓名
      专业
      班级
   button1
  
  

   button2
   
姓名
   
专业
   
班级
  
 
 

• 方法二
  还可以使用z-index属性设置层数。因为下层元素无法点击的本质是html元素的叠加，如果将他们分层处理也可以解决问题。设置下层层数比上层层数大时，下层点击事件便有效，上层点击事件有效。设置上层层数比下层层数大时，上层点击事件便有效，下层点击事件无效。
  示例代码:

 
  
  
  
 
 
  

      姓名
      专业
      班级
   button1
  
  

   button2
   
姓名
   
专业
   
班级