position: fixed 不能跟着容器滚动，因其定位基准永远是视口而非父容器；正确方案是父容器设 position: relative、子元素用 position: absolute 定位，或用 transform + scroll 监听实现动态跟随效果。
position: fixed 为什么不能跟着容器滚动
因为 position: fixed 的定位基准永远是视口（viewport），不是父容器。哪怕元素 DOM 结构嵌在 .scroll-container 里，只要设了 fixed，它就无视父容器的滚动、缩放、transform，死钉在屏幕坐标上。
常见错误现象：
- 滚动时按钮突然飞到浏览器右上角，而不是留在父容器右下角
- 父容器加了
transform: scale(0.9)，fixed元素位置完全错位 - 父容器设了
overflow: auto，子元素却“被裁掉一半”——其实是 fixed 元素被视口外区域截断，而非父容器裁剪
用 position: absolute + relative 父容器实现“伪固定”
这是最轻量、零 JS、兼容性最好的方案，本质是让父容器成为定位上下文，子元素相对于它定位。
关键条件必须同时满足：
- 父容器显式设置
position: relative（不能省略，否则absolute会往上找直到html） - 父容器有明确高度或
max-height，并启用overflow-y: auto - 子元素设
position: absolute，再用top/right/bottom/left定位
示例：
.scroll-container {
position: relative;
max-height: 400px;
overflow-y: auto;
}
.floating-button {
position: absolute;
bottom: 12px;
right: 12px;
}
这样按钮就“固定”在父容器内部右下角，随容器一起滚动，且不触发重排。
需要滚动中动态偏移？用 transform + scroll 监听
如果需求是“半速跟随”“视差滚动”或“锚点指示器”，absolute 不够用，必须 JS 配合 transform。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
别直接改 top 值——会强制重排，滚动卡顿明显：
- 监听父容器的
scroll事件（不是window.scroll），读取scrollTop - 计算偏移量后，设
element.style.transform = 'translateY(${y}px)' - 确保父容器没意外启用
transform、filter或perspective，否则会创建新包含块，让translateY参考系错乱 - 加
will-change: transform或transform: translateZ(0)启用硬件加速
注意：getBoundingClientRect().top 在 scroll 回调里反复读取会触发同步 layout，加重卡顿，应提前缓存初始值。
sticky 能替代吗？看约束条件
position: sticky 是原生方案，但只适用于“滚动到阈值后吸住”的场景，不是任意跟随。
它生效的前提很具体：
- 必须显式设置
top、bottom等偏移值（哪怕top: 0） - 父容器不能是
display: flex且未设align-items: start（否则基线对齐破坏判断） - 父容器若有
overflow: auto，sticky 只在该容器内生效，不会全局吸顶 - Safari 对嵌套 sticky + flex 组合仍有抖动问题，iOS 15.4 前版本支持不稳
真正要“在滚动容器内自由跟随”，sticky 多数时候只是看起来像，实际行为受限太多。
滚动容器内的跟随效果，核心矛盾在于：CSS 的定位机制天然不支持“fixed 相对于非视口”。所有可行方案都是绕过这个限制——要么换参考系（absolute），要么换更新方式（transform），要么换语义（sticky）。选哪个，取决于你是否能接受它的边界条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
