css在ios和android设备上的兼容性问题（移动设备不同内核浏览器样式兼容性）笔记

position属性带来的浮动问题：

项目案例：

网宿流量微信公众号活动红包抽奖页面；

问题描述：

在input被获取焦点时，屏幕上position属性值为absolute的元素，包含input，会被弹出的虚拟键盘顶起，导致显示样式异常

设备：

android设备存在此问题，而ios设备显示正常

原因分析：

css属性中对容器的样式中提到，子元素定位方式为absolute或者fixed，若父容器没有添加属性position:relative；则当前元素的定位坐标是相对于body元素的（大部分情况下也可描述为当前窗口可见范围）。问提的出现是android的虚拟键盘显示机制，占用了一部分的屏幕资源，是的分配给浏览器的屏幕资源高度缩小，position为absolute和fixed的元素在父容器没有定义position:relative的情况下，因为浏览器窗体可见范围的缩小，定位响应发生改变，所以出现“被顶起”的情况。

解决方案：

在分析中提到，父级容器与子元素的关系，所以在父级容器中定义容器高度，并设定position属性的值为relative即可解决此问题。