绝对定位的悬浮div盖住a链接的解决方案

昨天我做了个宽度占全屏的banner，设计稿上在banner图上面覆盖了一些导航，另外，banner图的左右箭头的位置位于版心的左右边缘，而不是屏幕的左右边缘。

见状，我马上在banner图上面放了个绝对定位的div，宽度正好等于版心宽度，并且水平居中放置，让banner图上的导航和左右箭头都作为它的子元素存在。效果很正常，美滋滋。（橙色的区域是定位的div，红色的部分是它的子元素）

结果今天才发现，我忘了在banner图外面包裹一层a标签了，包裹上a标签后，发现a标签无法被点击到！

一方面，包裹住<img>的<a>点击了需要要跳转到其他地方的，另一方面，这里的设计，的确要求上面要有一个与版心同宽的<div>来呈现一些内容，而且这些内容如果想正常显示，这个<div>必须绝对定位！而绝对定位又会覆盖掉这里的<a>，让<a>无法被点击，尽管<div>是透明的。

想到这里，我简直是抓狂到不行，我并没有看到过实际在使用的官网首页banner看到类似的情况，不知道别人是怎么解决这个问题的，我认为可能这是设计稿的硬伤。不过解决方案我最后还是找到了，在这里分享给大家。

这里隆重给大家介绍一个非常神奇的CSS3属性——pointer-events。它有两个属性值：默认值是auto,表示点击不能穿透，我们普通的元素就是如此，层级高的元素会挡住层级低的元素；另一个属性值是none，可以实现点击穿透的神奇效果，会让这个元素（以及它的子孙元素）无法成为任何点击事件的target。

我给这个定位的<div>加上了pointer-events: none;以后，下面的a真的可以被点击了。但是里面的左右箭头和下面的几个块状链接又不能点不到了。不要慌，给这些对应的子元素加上pointer-events: auto;重置回去就好了。

最后附上我查到的pointer-events的兼容情况：