如何让按钮在平板屏幕滑动、滚动时保持固定不动？

这段代码在传统非触屏电脑上运行良好：

<style>
    #stayFixedDiv{
      background-color: #FBD603;
      position: fixed;
      left: 40px;
    }
</style>

<body>
<div id ="stayFixedDiv">
 <a style="font-size: 35px; text-decoration: none"> Pause Video</a>
</div>

</body>

但该代码在平板上无法正常工作。当在平板上滑动屏幕时，按钮无法像在桌面端那样保持固定。

如何实现平板上按钮固定的效果？

以下是几个解决平板端position:fixed失效问题的实用方法：

• 补充垂直定位属性：多数移动浏览器要求position:fixed元素同时设置水平和垂直定位，仅指定left可能导致渲染异常。修改样式：

#stayFixedDiv{
  background-color: #FBD603;
  position: fixed;
  left: 40px;
  top: 20px; /* 新增垂直定位值，可根据需求调整 */
}

• 配置正确的视口标签：移动端视口设置不当会干扰固定定位，在HTML头部添加视口元标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

user-scalable=no禁止用户缩放，部分浏览器在缩放状态下固定定位会出现偏移。

• 启用硬件加速优化：部分平板浏览器在触摸滚动时会触发特殊渲染逻辑，给固定元素添加硬件加速属性可规避此问题：

#stayFixedDiv{
  /* 原有样式 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0); /* 适配webkit内核的平板浏览器 */
}

• 尝试position:sticky替代：如果需求是元素滚动到特定位置后固定，sticky在移动端兼容性更稳定，需设置触发条件：

#stayFixedDiv{
  background-color: #FBD603;
  position: sticky;
  left: 40px;
  top: 20px;
}

内容的提问来源于stack exchange，提问作者Tom