position: sticky 不生效最常见原因是父容器设置了 overflow 属性，导致失去滚动祖先参照；需确保 top/bottom 明确、元素类型支持、无 transform/filter 等干扰。
为什么 position: sticky 在某些情况下不生效
最常见原因是父容器设置了 overflow: hidden、overflow: auto 或 overflow: scroll，这会截断 sticky 的定位上下文。sticky 依赖最近的「滚动祖先」来判断是否触发粘性行为，一旦父级有溢出裁剪，它就失去参照基准。
其他关键条件包括：top（或 bottom）必须明确设置值；元素不能是 display: table-row 等不支持 sticky 的类型；且不能处于 transform、perspective 或 filter 非 none 的层叠上下文中。
- 检查父容器是否意外加了
overflow—— 尤其是 CSS 框架（如 Bootstrap）或重置样式里常带的全局规则 - 用浏览器开发者工具查看 computed 样式中的
position，确认是否真的计算为sticky而非回退为static - 确保头部元素在文档流中是「普通块级元素」，避免被
float或display: flex的子项隐式改变定位行为
position: fixed 实现固定头部时内容区域怎么留白
fixed 元素脱离文档流，如果不手动腾出空间，内容会从顶部开始堆叠，导致首屏被遮挡。必须给内容容器加一个等于头部高度的 margin-top 或 padding-top。
更稳妥的做法是用 padding-top，尤其当内容需要撑满视口高度（比如配合 min-height: 100vh）时，margin-top 可能被折叠，而 padding-top 不会。
立即学习“前端免费学习笔记（深入）”；
- 如果头部高度动态变化（如响应式下
64px→48px），优先用 CSS 自定义属性 +calc()：padding-top: calc(var(--header-height, 64px) + 1px) - 避免用 JavaScript 动态写
style.marginTop，既难维护又可能触发重排；CSS 方案更轻量、可继承、支持媒体查询 - 注意 fixed 头部的
z-index要足够高，否则可能被后续position: relative的模块遮盖
移动端下 position: sticky 的兼容性和滚动卡顿问题
iOS Safari 从 v14.5 开始才稳定支持 position: sticky，旧版本（尤其是 iOS 13.x）存在大量 bug：比如滚动停止后才触发粘性、快速滑动时闪烁、或完全不响应。Android Chrome 支持较好，但 WebView（尤其低版本）仍可能降级为 static。
性能方面，sticky 在频繁滚动时比 fixed 更轻量——它不强制重绘整个页面，但若父容器有 will-change: transform 或复杂阴影，仍可能引发合成层抖动。
- 对 iOS 13 及更早用户，建议降级方案：监听
scroll事件 +getBoundingClientRect().top判断位置，再切换fixed类名（注意节流） - 避免在 sticky 元素上使用
box-shadow或backdrop-filter，这些会显著增加合成成本 - 不要把 sticky 用在
table内部（如thead），Safari 对表格内 sticky 的支持始终不稳定
用 position: sticky 还是 position: fixed？关键看滚动范围
sticky 是「局部粘性」：只在父容器滚动到临界点时生效，适合侧边栏、表格列头、或嵌套在某个卡片内的标题；fixed 是「全局固定」：相对于视口，适合全站导航栏、悬浮按钮、或跨区域持续可见的控件。
如果内容区本身是独立滚动容器（比如 height: 600px; overflow-y: auto），sticky 可以让头部只在此区域内粘住；而 fixed 会让头部永远钉在视口顶部，与该容器无关。
- 需要「随内容区滚动而出现/消失」→ 选 sticky
- 需要「无论页面怎么滚都一直可见」→ 选 fixed
- 不确定时先试 sticky：语义更清晰、无需手动留白、天然支持响应式高度变化
真正容易被忽略的是：sticky 的「粘性边界」由最近的具有滚动能力的祖先决定，而不是整个页面。这点理解偏差，会导致 80% 的 sticky 失效问题。
