解决手机端微信公众号内input输入框获取焦点后，底部导航栏显示在输入法软键盘上面的问题问题描述
在微信公众号中打开网站时，input输入框和textarea输入框获取焦点后，弹出输入法键盘，将底部的导航栏顶到输入法键盘上面。这种情况下，用户无法正常使用底部导航栏。
原因分析
1. 微信公众号的布局结构: 微信公众号的页面布局结构通常是由一个容器元素（例如div）包含多个子元素（例如input、textarea、button等）。当输入法键盘弹出时，底部导航栏被顶到输入法键盘上面。
2. 软键盘的显示: 当用户点击input或textarea输入框时，软键盘会自动弹出。软键盘的显示会覆盖页面的部分区域，导致底部导航栏被顶到输入法键盘上面。
解决方案
1. 使用position: fixed;: 将底部导航栏设置为fixed定位，可以使其在页面滚动时保持固定位置，不受软键盘的影响。
```css.bottom-nav {
position: fixed;
bottom:0;
left:0;
width:100%;
}
```
2. 使用z-index: 将底部导航栏设置为一个较高的z-index值，可以使其覆盖软键盘。
```css.bottom-nav {
z-index:9999;
}
```
3. 使用transform: 将底部导航栏进行transform操作，例如translateY(-100%),可以使其在软键盘弹出时保持原来的位置。
```css.bottom-nav {
transform: translateY(-100%);
}
```
4. 使用JavaScript: 使用JavaScript代码检测软键盘的显示状态，然后根据此状态调整底部导航栏的位置。
示例代码
以下是使用position: fixed;和z-index解决方案的示例代码：
```html
```
总结
解决手机端微信公众号内input输入框获取焦点后，底部导航栏显示在输入法软键盘上面的问题，可以使用position: fixed;、z-index和transform等CSS属性或JavaScript代码来实现。
