移动端position:fixed踩过的坑

1,769 阅读1分钟

问题:position:fixed属性在ios的兼容性不好,所以页面中使用fixed层级会出现混乱,出现一些乱七八糟的问题.

解决:

1.每个页面让其高度等于屏幕高度,然后页面在这个盒子里滚动,当弹窗出现时,让其overflow=hidden 其他都用absolute;

2.步骤1会产生问题:页面有输入框input时弹起键盘后,页面下不来的问题;

3.解决2需要在页面获取焦点和失去焦点时改变它的top值(top值要变,不然无效);

4.让弹窗上下左右固定的方法

position: absolute; left:0; bottom:0; right:0; height: 100%; overflow: hidden;

5.如果页面只是一个弹窗并没有其他复杂效果,可以使用fixed固定页面。