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 都不漂移。

立即学习“前端免费学习笔记（深入）”；

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

z-index 不是越大越好，但必须显式设置

z-index 缺省值是 auto，意味着它可能被任意一个设置了 z-index 的兄弟元素盖住——哪怕那个元素只写了 z-index: 1。

建议值取 999 或 1050，够用且不冲突：

• 避免堆到 999999，否则和第三方弹窗 SDK 的层级打架
• 确保父容器没意外创建新的层叠上下文（比如 opacity < 1、transform 非 none）
• 如果按钮仍被遮，检查是否被 iframe 或 video 这类原生控件覆盖——它们天然处于最高层，CSS 无法穿透

主内容如何避让固定悬浮条

fixed 元素不占文档流，所以主内容不会自动“绕开”它——你看到的遮挡，其实是内容上移填补了原本的空间。

正确做法是提前预留空间：

• 右下角按钮：给 <main> 或主体容器加 padding-right: 80px（值 = 悬浮条宽度 + 安全边距）
• 底部操作栏：给 body 加 padding-bottom: 56px（值 = 操作栏高度）
• 切忌用 margin 或 height 强行撑开，会导致小屏横向滚动或响应式断点失效

这个 padding 必须写死 px，不要用 calc() 或 vw，否则在 Safari 中可能因视口计算延迟导致闪动。

最常被忽略的一点：iOS Safari 在页面总高度不足一屏时，fixed 元素可能“粘滞消失”。只需给 body 加一行 min-height: 100vh，就能稳住锚点——这不是 hack，而是规范要求的视口基准。