position：fixed定位问题

首先大家知道position：fixed；这个css属性在任何环境下都有可能会被阻断，也就是无法作用于全局。包括：transform / perspective / filter

也就是说，当父级元素中有含上面几个css属性的时候，你写的模态框，透明背景等等，就不能覆盖整个屏幕了。

例如：
可以试试在父级加入下面的css：那么fixed的范围就是加入这个属性的元素

transform: translateZ(0);
-webkit-transform: translateZ(0);

IOS系统中：

ios5以上的手机确实兼容了position:fixed，
但是对于上面说到的三个，ios不论什么浏览器还会被下面这个属性阻断：
overflow:scroll;
所以要想我们在项目中的遮罩蒙版等作用于整个屏幕，要将其所有的父级元素css中的overflow置为visible，但是这又是不现实的。

解决办法

简单粗暴的，用js控制下
document.getElementById(‘xxx’).style.overflow= ‘visible’
document.getElementById(‘xxx’).style.overflow= ‘scroll’
根据业务逻辑去处理一下，
或者就是创建根节点挂在app或者body上
暂时还没想到其他更好的办法

参考链接:

谈一谈苹果手机关于position:fixed的兼容性
ios position: fixed 问题
CSS position: fixed absolute失效问题