position: sticky吸顶失效主因是祖先容器overflow:hidden/auto/scroll切断锚定链或高度塌陷，需用显式滚动容器包裹并避免transform/filter等创建新层叠上下文的属性。
position: sticky 是当前最直接、最可靠的吸顶导航布局方式，前提是结构写对——错的不是 CSS，而是 HTML 容器层级和语义嵌套。
吸顶元素必须有明确的滚动上下文父容器
浏览器只在“最近可滚动祖先”范围内计算 sticky 行为。如果 <header></header> 直接放在 下，而 body 被设了 overflow: hidden（比如弹窗关闭后遗留的样式），sticky 就彻底失效，降级为 relative。
实操建议：
- 显式包裹一层滚动容器：
<div class="scroll-container">，设 <code>height: 100vh或max-height: 100vh; overflow-y: auto - 把吸顶导航（如
<header></header>）放在这层内，而非直接丢进 - 确保该容器没设
transform、filter、will-change—— 这些会创建新层叠上下文，切断粘性 - 别用
<header></header>自身当“根容器”，它只是语义标签；用<div class="sticky-wrapper"> 包一层更稳妥 <h3>父容器 overflow 和高度塌陷是失效主因</h3> <p>90% 的 <code>sticky不生效，都卡在这两点：父级overflow: hidden|auto|scroll截断行为，或父级高度为0（比如空 div、display: flex但没内容撑开）。立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 导航栏完全不动，像普通块级元素一样随页面滚动
- 只在局部区域“粘”一下，比如侧边栏里滚动时吸顶范围极小
- iOS Safari 上滚动卡顿、闪动或突然脱离顶部
验证方法：临时加
background: #ff0; border: 1px solid red，滚动看是否出现红框——没出现，基本就是父容器问题。嵌套滚动区域下 sticky 失效怎么办
当吸顶需求出现在 modal-body、卡片内部、或左侧 sidebar 的局部滚动区时，
sticky默认只在那个局部容器内生效，无法“粘到视口顶部”。不能靠调大
top值硬解，得重构结构：- 把吸顶元素（如分类导航）从局部滚动区提出来，放到外层固定布局位置（例如和 sidebar 并列的 flex item）
- 若必须保留在局部容器内，改用 JS 监听该容器的
scrollTop，而不是window.scrollY - 避免在局部滚动区父级上设
transform或overflow，否则连 JS 计算基准都会偏移
真正难的不是写
position: sticky，而是判断它在哪一级被悄悄截断——浏览器不会报错，只会沉默降级。每次失效，先查三层：自身有没有top，父容器有没有overflow，再往上两层有没有transform或filter。
