position: sticky 不能真正固定在视口，它仅在具有滚动机制的最近祖先容器内粘滞，受父容器高度、overflow、层叠上下文等限制，超出边界即失效。
position:sticky 能不能真正“固定”在视口？
不能——position: sticky 不是 position: fixed，它只在父容器的滚动范围内“粘住”，一旦超出父容器边界（比如父元素高度不够、被裁剪或设置了 overflow: hidden），就会失效。很多人以为加了 top: 0 就能一直钉在顶部，结果一滚动就掉下去，问题往往出在这里。
- 父容器必须有明确的高度或可滚动内容（否则没有“滚动范围”可粘）
- 父容器不能设
overflow: hidden或overflow: clip（会截断粘性行为） -
sticky元素本身不能是display: flex容器的直接子项且同时设了align-items: stretch（某些旧版 Safari 会忽略top） - 必须指定
top、bottom、left或right中至少一个值，否则等同于static
实现导航栏“吸顶”时的常见错误写法
最典型的是把 header 直接扔进 body，然后加 position: sticky; top: 0; —— 看似合理，但 body 默认不是滚动容器（实际滚动的是 documentElement），而 sticky 的参考系是最近的**具有滚动机制的祖先块级容器**。如果父容器没溢出，它就永远不触发粘性。
- ✅ 正确做法：确保
header的父容器有max-height+overflow-y: auto，或让整个页面靠html/body滚动，并确认该父容器未被transform、filter、will-change等属性创建新的层叠上下文（这些会中断sticky的定位链） - ❌ 错误组合：
position: sticky+z-index: -1（会被底层内容遮盖，且部分浏览器不支持负z-index的 sticky 元素） - ⚠️ 注意兼容性：
position: sticky在 iOS Safari 15.4+ 和 Android Chrome 56+ 支持良好，但 iOS Safari ≤15.2 对bottom: 0支持不稳定，底部吸底建议降级用 JS 监听scroll+getBoundingClientRect()
sticky 实现底部吸底为什么比顶部更难？
因为 bottom: 0 的触发依赖父容器**底部边界进入视口**，而大多数页面内容是向下生长的，用户往往需要滚动到底部才能看到“粘底”效果；更麻烦的是，如果父容器高度小于视口，sticky 根本不会激活——它不会“提前占位”。
- ✅ 可行方案：给父容器设
min-height: 100vh，再配合display: flex; flex-direction: column;，将吸底元素放于 flex 容器末尾，并设margin-top: auto（这是更可靠、无 JS 的替代方案） - ❌ 不要依赖
position: sticky; bottom: 0做全局页脚——它只在父容器内滚动时有效，无法应对“内容很短，页脚本该撑满全屏”的场景 - ? 性能提示：避免对
sticky元素频繁修改top/bottom值（比如用 JS 动态更新），这会强制重排，尤其在长列表中易卡顿
和 fixed 对比：什么时候该放弃 sticky？
当你要固定的东西需要脱离文档流、无视父容器限制、始终相对于视口定位（比如悬浮按钮、全局通知条、返回顶部箭头），position: fixed 是唯一选择。sticky 的本质是“有条件的 relative”，它的存在前提是父容器提供滚动锚点。
立即学习“前端免费学习笔记（深入）”；
- 用
fixed：全局操作按钮、侧边工具栏、跨路由持久存在的状态提示 - 用
sticky：表格列标题、文章内小目录、局部模块的 tab 导航——它们只在自己模块内有意义 - 混合用法可行：比如用
sticky实现区域导航，再用fixed实现右下角客服入口，二者互不干扰
真正容易被忽略的是层叠上下文的影响：一个被 transform: translateZ(0) 包裹的卡片，内部的 sticky 子元素会以该卡片为参考系，而不是整个页面——这种隐式限制，调试时很难一眼发现。
