现在我们需要实现一个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的应用案例：

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

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