position: fixed 按钮“粘”在模块右下角是因父级 transform 等属性导致 containing block 降级；需挂载到 body、显式声明 right/bottom、适配安全区、合理设 z-index、扩展热区并节流滚动。
position: fixed 按钮突然“粘”在某个模块右下角？
这不是 bug，是浏览器悄悄换了定位基准——position: fixed 在 Safari、微信 WebView 甚至某些 Chrome 版本里，一旦父级元素带 transform、will-change 或 opacity ，就会把按钮的 containing block 从视口降级为那个父容器。
常见现象：开发时好好的，上线后按钮跟着某个卡片一起滚动；iOS 上滚动时轻微跳动；展开客服面板后按钮上移一段距离。
- 用开发者工具选中按钮 → “Computed” 面板看
position是否真为fixed，再点开Containing Block确认是不是 - 往上逐级检查祖先元素的
transform（哪怕只是transform: translateZ(0)）、filter、perspective - 最稳妥解法：把按钮直接挂到
document.body下，别嵌套在任何业务容器里 - 如果必须嵌套，用
top: calc(50vh - 65px)这类视口单位绕过干扰（假设按钮高 130px）
right 和 bottom 同时设了吗？
只写 bottom: 24px 不写 right，浏览器会按 right: auto 处理，按钮可能靠左、居中，甚至被文字流挤偏——右下角定位必须两个方向都显式声明。
别用 left: calc(100vw - 60px) 这种计算，缩放或横屏时容易错位；也别依赖 text-align: right 或 float: right，它们对 fixed 元素无效。
- 推荐写法：
bottom: 24px; right: 24px;—— 留出可点击余量，避免贴边难触达 - 移动端加安全区适配：
right: env(safe-area-inset-right, 24px); bottom: env(safe-area-inset-bottom, 24px); - 尺寸用固定像素：
width: 56px; height: 56px;，不用%或em，防止缩放后热区失效
z-index 明明写了，为什么还是被盖住？
z-index 不是越大越好。设成 999999 可能压住模态框（Bootstrap 的 .modal 默认 z-index: 1050）、视频全屏控件，甚至系统级弹窗；更隐蔽的问题是父容器意外触发了层叠上下文（stacking context），导致按钮的 z-index 只在那个局部生效。
- 先查页面已有最高
z-index（用开发者工具 → Computed →z-index），然后设高 10–50 即可，比如z-index: 1060 - 检查按钮父级是否带
transform、opacity 、<code>will-change—— 这些都会创建新 stacking context - 确保按钮 DOM 顺序在可能遮挡它的元素之后（比如放在
前最后几个节点） - 别用
display: none控制显隐，改用opacity: 0; pointer-events: none;避免重排
移动端点不中、iOS 滚动卡顿怎么破？
视觉尺寸 24px 的 SVG 图标，实际点击热区只有 24×24px，远低于 WCAG 推荐的 48×48px 下限；滚动监听没节流，scroll 事件每秒触发上百次，在 iOS Safari 上直接卡顿。
- 用
padding扩展热区：padding: 12px; box-sizing: border-box;，让总尺寸达到 48×48px 以上 - 滚动显隐逻辑必须节流：记录
lastScrollTop，只在requestAnimationFrame里做 DOM 更新，别在scroll回调里直接操作样式 - 加
touch-action: manipulation;禁用双击缩放，避免长按唤出菜单干扰点击 - 键盘用户要能 Tab 进去：用语义化
<button></button>标签，加role="button"+aria-label+tabindex="0"
真正麻烦的不是写几行 CSS，而是定位基准被父级样式静默劫持、z-index 被层叠上下文截断、热区尺寸被缩放破坏——这些细节不验证，上线就出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
