bottom 和 right 应设为固定像素值才安全：推荐 bottom: 24px、right: 24px；移动端可加大至 bottom: 80px；禁用 %、vh、rem 等不稳定单位。
bottom 和 right 值设多少才安全
直接写 bottom: 0 或 right: 0 看似简单，但实际在 iOS Safari、窄屏设备或系统任务栏/地址栏收放时容易被遮挡或错位。推荐用固定像素值留出安全间距：bottom: 24px、right: 24px 是经过多端验证的最小可靠偏移。
移动端可单独加大间距防止误触底部导航栏：@media (max-width: 768px) { bottom: 80px; }。别用 %、vh 或 rem，iOS 对这些单位在 fixed 元素上的解析不稳定，尤其软键盘弹出后会跳变。
为什么 position: absolute 不能替代 fixed
很多人试图用 position: absolute + bottom: 0 实现“固定”，结果一滚动按钮就跟着跑——因为它锚定的是最近的已定位祖先（比如某个 transform: translateY(0) 的父容器），不是视口本身。
只要页面里有以下任一情况，absolute 就大概率失效：
- 父级用了
transform、will-change或perspective - 存在
overflow: auto的滚动区域嵌套 - CMS 动态插入 wrapper 容器，改变了定位上下文
position: fixed 才真正绑定视口坐标系，滚动、缩放、切换 tab 都不漂移。
z-index 不是越大越好，但必须显式设置
z-index 缺省值是 auto，意味着它可能被任意一个设置了 z-index 的兄弟元素盖住——哪怕那个元素只写了 z-index: 1。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
建议值取 999 或 1050，够用且不冲突：
- 避免堆到
999999，否则和第三方弹窗 SDK 的层级打架 - 确保父容器没意外创建新的层叠上下文（比如
opacity 、<code>transform非 none） - 如果按钮仍被遮，检查是否被
iframe或video这类原生控件覆盖——它们天然处于最高层，CSS 无法穿透
主内容如何避让固定悬浮条
fixed 元素不占文档流，所以主内容不会自动“绕开”它——你看到的遮挡，其实是内容上移填补了原本的空间。
正确做法是提前预留空间：
- 右下角按钮：给
<main></main>或主体容器加padding-right: 80px（值 = 悬浮条宽度 + 安全边距） - 底部操作栏：给
body加padding-bottom: 56px（值 = 操作栏高度） - 切忌用
margin或height强行撑开，会导致小屏横向滚动或响应式断点失效
最常被忽略的一点：iOS Safari 在页面总高度不足一屏时，fixed 元素可能“粘滞消失”。只需给 body 加一行 min-height: 100vh，就能稳住锚点——这不是 hack，而是规范要求的视口基准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
