sticky / fixed 定位实验室

先记住
参照物不同

sticky 先像普通元素一样占据文档空间；滚动到阈值后才在最近的滚动容器内吸附。
fixed 脱离文档流，直接相对于浏览器视口定位。

在面板内滚动

这个灰色区域本身是一个可滚动容器。黄色元素在未触顶时是普通文档流的一部分。

position: sticky; top: 12px;
我只会粘在这个灰色面板的顶部。

继续向下滚动此面板：黄色卡片会停在顶部，但不会逃出灰色面板。

它仍保留原始位置，因此后续内容不会“顶上来”占据它的位置。

当滚动到父容器底部，sticky 元素也会随父容器一起离开。

常见用途：表头、侧栏目录、分组标题。

再滚一点，观察它始终受这个容器边界约束。

这是最后一段内容。

看右侧蓝色卡片

这里没有“蓝色 fixed 卡片”留出的布局位置，因为 fixed 已脱离文档流。

position: fixed;
bottom: 88px; right: 45px;
我相对浏览器视口固定。

滚动这个面板、滚动整个页面，或缩放窗口：蓝色卡片仍贴着浏览器右下区域。

它不受本面板边界限制，可能覆盖其他内容。

常见用途：悬浮客服、返回顶部、全局操作按钮、全屏弹层。

若没有预留边距，fixed 元素可能遮挡底部操作区。

继续滚动也不会改变它的位置。

sticky：占位 → 到达 top / bottom 阈值才吸附 → 受父级/滚动容器边界限制。

fixed：不占位 → 一开始就脱离文档流 → 默认相对 viewport，不受普通父容器裁制。