失效原因分析:
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在移动端的坑
-
fixed在某些情况下可能导致容器内的子元素的1px边框线消失,即使使用z-index也无法解决。
解决方法:可以使用translateZ属性来解决 -
ios下,fixed定位的容器内不能带有input等可以唤起键盘的元素,这是常见的bug。
解决方法: 在input聚焦唤起键盘时会去掉fixed定位状态,改为absolute。 -
fixed+可滚动的容器内会导致fixed定位的子元素在滚动时定位失效,滚动完成后才正常回到fixed的位置。
解决方法:尽量不要在可滚动的容器内包含fixed定位的子元素。 -
ios不支持onresize事件