html 超链接被文本框遮住，无法点击，而且一部分内容被遮挡，请问怎么改？

Posted 2023-04-11

返回顶部的按钮被文本框可以看见但无法点击，上面的字则被遮住了。请问各位大佬怎么改才可以解决问题？

参考技术A #example display:block; width:20%; position:fixed; bottom:0; left:40%; text-align:center; padding:1em 0;
.blog-box margin-bottom:4em;追问

现在可以显示了，但是点击回到顶部的按钮没有反馈

本回答被提问者采纳 参考技术B 给example这个div加个属性

z-index:9999追问

我之前已经试过了，还是没有反应，并且a标签会不处于页面中间，会发生偏移

移动端中 H5输入框在弹起键盘后被遮挡

参考技术A

可见，键盘遮盖住了这个输入框，而且此时不能滚动，而按钮的设计为始终置底
置底的按钮为fixed布局，观察得知，这样当键盘弹起时，其实页面的高度被缩短成类似于这样

这样，始终置底的元素会遮盖住输入框，并且由于界面并没有长到可以滚动的地步，输入框非常正常地被遮住了
【解决办法】

首先，把置底元素设置成，在页面的底部而非屏幕的底部

然后，设置页面的高度，让按钮有置底的效果

注意有 最小高度 ，因为当键盘弹起时，100vh是缩小的那部分的高度，而不是屏幕高度
*如果有大屏的需求，适配一下就好

这样，当键盘弹起时，内容就是可以滚动的了，出于用户体验的需求，可以在focus输入框的时候，把滚动条划一下，露出输入框

具体的数值可以再调整

设置content为 overflow: auto;
让content的高度为 100vh-buttonHeight

使用第二种的html

利用window.resize方法，这个方法的特性是：当调整浏览器窗口的大小时，发生 resize 事件。

screenHeightNoChange==true的时候使用方法三，当==false的时候，将button变成position:relative; 就能解决问题了
以上，就是解决问题的方法了