必须用 position: fixed 将按钮直接挂载到 body 上，而非 relative 容器内 absolute 定位，因后者易被父级层叠上下文截断、z-index 失效且移动端 Safari 兼容性差；正确方式是 fixed + z-index + CSS 变量动态微调。
直接用 position: fixed 把按钮挂到视口上，而不是“浮在背景图上”——因为背景图属于某个容器，而按钮需要脱离文档流、独立于任何父级定位上下文，否则会被遮挡或错位。
为什么不能用 position: absolute 相对于背景图容器？
常见错误是给背景图所在 <div> 加 position: relative，再把按钮设为 absolute。这看似合理，但一旦该容器触发了层叠上下文（比如加了 transform、filter 或 will-change），按钮就会被锁死在它的局部层级里，z-index 再高也压不过页面其他 fixed 元素。
- 背景图容器常用于全屏轮播、hero 区域，这些地方几乎必然用到
transform: translateZ(0)或opacity动画，一加就截断层叠流 -
absolute按钮的z-index只在它所属的层叠上下文中有效，无法突破父级限制 - 移动端 Safari 对嵌套
absolute+fixed混用的支持极不稳定，滚动时按钮可能消失
正确做法：按钮必须直挂 <body>，用 fixed 定位
绕过所有潜在干扰，让按钮的定位基准就是 viewport 本身。这是唯一能确保它“稳稳浮在一切之上”的方式。
- HTML 中把
<button>放在<body>最底部（或用 JS 动态 append 到 body） - CSS 只依赖
top/right/bottom/left和z-index，不写任何父级 relative - 避免给按钮加
transform（如scale或translate），否则会意外创建新层叠上下文 - 示例关键样式：
.floating-btn { position: fixed; bottom: 24px; right: 24px; z-index: 1000; }
适配背景图尺寸变化的定位微调
如果背景图容器高度动态变化（比如 hero 图随屏幕缩放重排），而按钮需保持视觉对齐（例如始终对齐图内右下角图标），不能靠 JS 实时计算 offsetTop —— 性能差且易出竞态。
立即学习“前端免费学习笔记（深入）”；
- 更可靠的做法是用 CSS 自定义属性配合 calc()，把背景图容器的高度/偏移暴露出来：
body { --hero-height: 500px; }然后按钮用top: calc(var(--hero-height) - 60px)这类表达式 - 若背景图由 JS 控制（如 Swiper），在 slideChange 后同步更新
document.documentElement.style.setProperty('--hero-height', h + 'px') - 慎用
vh单位：iOS Safari 地址栏收起时100vh会突变，导致按钮跳动
真正难的不是让按钮“出现”，而是让它在各种层叠上下文、滚动行为、安全区和缩放场景下都稳定可点——这些细节一旦漏掉，用户在某台设备上点不到按钮，问题就很难复现和定位。
