position: fixed定位失效原因及解决方案

失效原因分析：

1、MDN获取position属性相关信息

元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。

fixed

属性会创建新的层叠上下文。当元素祖先的

transform

,

perspective

或

filter

属性非

none

时，容器由视口改为该祖先。

当position属性设置为

fixed

时，如果该元素的祖先元素设置了

transform

等属性后，则定位从原来的相对于视口，改为设置了特殊属性的祖先元素

2、transform规范相关信息

当元素设置了transform属性，并且取值不为

none

时，该元素会创建一个containing block供子元素布局。绝对定位后代元素、固定定位后代元素和后代中的固定背景都将基于该元素的padding box进行定位

分析后可知，元素设置了transform属性后会创建一个containing block，这个containing block将重新定义其内部固定定位元素的定位参照点（创建这个containing block元素的padding box），最终固定定位的效果退化为绝对定位。

解决方法：

1.尝试设置transfrom属性元素宽高来达到目的；

2.调整页面结构。

position:fixed;在android下无效，需要设置meta标签

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

fixed在移动端的坑

1. fixed在某些情况下可能导致容器内的子元素的1px边框线消失，即使使用z-index也无法解决。 解决方法：可以使用translateZ属性来解决
2. ios下，fixed定位的容器内不能带有input等可以唤起键盘的元素，这是常见的bug。 解决方法： 在input聚焦唤起键盘时会去掉fixed定位状态，改为absolute。
3. fixed＋可滚动的容器内会导致fixed定位的子元素在滚动时定位失效，滚动完成后才正常回到fixed的位置。 解决方法：尽量不要在可滚动的容器内包含fixed定位的子元素。
4. ios不支持onresize事件