在开发移动端h5应用时，尤其是在开发混合app时，一般情况下，顶部导航会一直固定在页面头部，如下图：
h5的常规操作是直接来个fixed定位，代码如下：
但是，这种写法，在ios系统下，会出现一些，类似下拉页面时，导航会一起滚动，无法固定在屏幕顶部，或者是有input标签的时候，调出软键盘之后，页面无法往上顶，导致标签被挡住，尤其是在414屏，效果更严重
为解决这些兼容性问题，建议使用如下两种布局：
其一：position:absolute?
首先构建一个width: 100%;height: 100%;overflow:hidden;的容器，在此容器中，分离顶部导航跟内容区，顶部导航为absolute定位，内容区为滚动区，这样即可达到导航固定在顶部，页面可滚动，整体代码如下：
这种方式在于对overflow的了解深度，越透彻，越容易理解……
其二：？flex布局
将整体页面一分为二，头部跟内容区，flex方向为垂直即可
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery