关于移动端ios底部区域z-index部分生效 页面撕裂问题

1. z-index只有在设置了position为relative,absolute,fixed时才会有效。
2. z-index的“从父原则”。当你发现把z-index设的多大都没用时，看看其父元素是否设置了有效的z-index，当然别忘了先看看自身是否设置了position。
3. 如果以上都已经设置了 那就看下哪个位置是否有设置 -webkit-overflow-scrolling: touch；这个样式 如果有 注释掉即或者简单粗暴全局设置为unset（这个样式太坑爹了！！）
   1）问题：
   在safari上，使用了-webkit-overflow-scrolling:touch之后，页面偶尔会卡住不动。
   在safari上，点击其他区域，再在滚动区域滑动，滚动条无法滚动的bug。
   在safari上，如果设置了自定义的底部区域，z-index不生效，样式也很诡异。
   通过动态添加内容撑开容器，结果根本不能滑动的bug或者页面撕裂。
   
   滚动中 scrollTop 属性不会变化
   手势可穿过其他元素触发元素滚动
   滚动时暂停其他 transition

解决方案：

方案一

	<div id="app" style="-webkit-overflow-scrolling: touch">
      <div style="min-height: 101%"></div>
    </div>

方案二

<div id="app" style="-webkit-overflow-scrolling: touch;">
    <div style="height:calc(100%+1px)"></div>
</div>

总结：方法就是在webkit-overflow-scrolling:touch属性的下一层子元素上，将height加1%或1px。从而主动触发scrollbar。