本篇文章是我在实际工作中碰到的问题，然后找到了解决方案，分享出来希望能帮到看到此文章的朋友
我们在日常开发中会碰到各种各样的布局需求，本篇文章要讲到的是关于重叠布局的一些问题所在，重叠布局这个布局跟普通的那些布局不同，应该是你拿到这个需求第一个方案想到的是用position定位来做，我在工作中遇到的需求就是在一个路由的页面，里面只有一个canvas地图，然后在canvas地图的四个角落有四个不同的组件，所以想要达到这个需求就必须得想办法让这四个组件怎么重叠上去
重叠在底下的canvas是鼠标拖动可以移动这个canvas，遇到这种需求的话就只能用定位来做了，但是我写的方案是把组件用flex写，canvas组件我用的是定位，先把四个组件的样式用flex布好，然后再把canvas组件设置绝对定位top：0,left:0,需要注意的是 需要在flex布局的四个组件里设置z-index，因为canvas组件设置了绝对定位会覆盖四个组件
这是我html的结构，map是canvas组件 占满了main区域，然后topbuttom是flex布局的四个组件，如果不会flex布局或者不会怎么用flex布局让元素在四个角可以参考我的上一篇文章 你必须学会的flex布局
然后还有的人可能会问能不能用负的margin去做，这里提一下，我在做这个需求的时候也想过这个办法，但是实际做的时候碰到了问题，就是这个办法有时候可以做到有时候做不到，就是从上可以往下叠从右可以往左叠，但是从上往下和从左往右就不行，会连着旁边的元素一起挤走。所以建议还是使用定位去做，也多不了几行代码，虽然我平时很不喜欢用定位去写布局，但是遇到这种情况也只能用定位去做了，所以如果遇到这种需求的话我建议是把被叠下去的元素用定位去写，然后叠在上方的元素用flex布局，这样就算要响应别的设备也不会出现很大的问题。
最后还有一个问题就是重叠布局影响到了被叠在下面元素的事件触发，最开始我就是遇到了这个问题，当我用flex布局组件，然后发现我的canvas只有中间一小部分能拖拽，别的地方不能拖拽，因为flex布局无形的挡住了那些区域，这个时候就要好好检查一下，你的z-index设置在了哪个元素上面，一定要设置在你角落组件的元素上面，如果设置了z-index没有效果可以试着使用一个css3的新属性
pointer-events: none； //设置了这个属性的html元素上的事件会失效 包括子元素的事件
设置了这个属性后底层元素的事件就可以触发了，如果失效的元素子元素需要触发时间呢
pointer-events: auto;
在需要触发事件的子元素添加这个样式就可以了
其实这个属性在重叠布局中应该用不到，如果你遇到事件不生效的问题请先检查你的代码，看看z-index设置在哪个元素上面，是不是用的position做的，除非你的需求是上层的组件没有事件功能 并且在上层组件上依然能操作下层组件才会用到这个属性。
然后这里发现了一个chrome控制台里特别好用的一个工具 更新后就有了 可以随意调换你的flex属性 有了这个工具对于那些不懂flex布局的初学者简直不要太爽 赶快去更新你的chrome吧~
