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。
