实现多层DIV叠加的js事件穿透
Flash里面有个很好的特性是，一个容器里，不存在实际对象的部分，不会阻拦鼠标事件穿透到下一层。
前端就不一样了，两个div层叠以后，上层div会接收到所有事件（即使这个div里面内容是空的，没有任何实际对象），下层div什么事件都接不到。
举个例子：
这个示意图中
C方块在A容器中（A容器边框为红色）
D方块在B容器中（B容器边框为绿色）
A B部分重叠，B在上层。
不做任何处理的话，C方块永远无法被点到，因为B把它盖住了。
下面，我将给出一种方案，在不改变页面结构的情况下，让CD都能得到正常相应。
主要利用的是css中的pointer-events属性
语法：
pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
默认值：auto
适用于：所有元素
继承性：有
动画性：否
计算值：指定值
取值：
- auto：
- 与pointer-events属性未指定时的表现效果相同。在svg内容上与
visiblepainted值相同 - none：
- 元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
- 其他值只能应用在SVG上。
- 参考链接：http://www.css88.com/book/css/properties/user-interface/pointer-events.htm
- 注意，这个属性部分旧版浏览器可能不支持。
- 我注意到，设置为none之后，其子元素仍然可以通过显式设置auto来响应鼠标事件，那么我们可以将A B容器都设置为none，不响应鼠标事件，同时，将CD显式设置为auto，让他们响应鼠标事件，这样一来，B就不会挡住A了，下面是具体代码
Test position
结果如下：