position: sticky 实现顶部固定栏最轻量且语义清晰，但需满足top设具体值、父容器无overflow隐藏、存在可滚动祖先等条件，否则完全不生效。
position: sticky 是实现顶部固定栏最轻量、语义最清晰的方式，不需要 JavaScript，也不影响文档流，但它的行为高度依赖父容器和兄弟元素的布局约束——用错地方就完全不生效。
为什么 position: sticky 有时完全没反应？
这不是 bug，而是它有明确的触发条件：
-
top（或bottom）必须设置具体值，比如top: 0；设为auto或不设，等于没写 - 父容器不能有
overflow: hidden、scroll或auto，否则会截断粘性行为（常见于模态框、卡片、Flex 容器） - 不能是
display: table或某些匿名表格单元格的子元素 - 必须有可滚动的祖先容器（通常是
或显式设置了height+overflow-y: scroll的块）
基础写法与最小必要样式
一个真正能“粘住”的顶部栏，最少需要这些 CSS：
.header {
position: sticky;
top: 0;
z-index: 100;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
注意：z-index 不是可选的——如果页面有其他定位元素（比如下拉菜单、弹窗），不设 z-index 可能被遮挡；background 和 box-shadow 是为了视觉上“浮起”，避免文字穿透。
立即学习“前端免费学习笔记（深入）”；
在 Flex / Grid 布局中失效怎么办？
当 .header 是 display: flex 容器的直接子项时，sticky 常常静默失败。根本原因是：Flex 容器默认把子项当作“弹性项目”处理，而粘性定位在部分浏览器中尚未完全适配这种上下文。
解决方法很简单：
- 给父容器加
align-items: start（避免子项被居中/拉伸干扰定位基线） - 或更稳妥地：把
.header包一层<div>，让这层 div 成为 Flex 子项，而 <code>.header在其内部做 sticky - Grid 布局同理——不要把 sticky 元素直接放在
grid-area内，先套一层普通块级容器
移动端兼容性与滚动穿透问题
iOS Safari 从 15.4 起才完整支持 position: sticky，旧版本（尤其是微信内置浏览器）仍可能回退为普通定位。更隐蔽的问题是：在 iOS 上，如果页面整体不可滚动（比如父容器 height: 100vh 且无溢出），sticky 会彻底不触发。
验证是否生效，最直接的办法是打开 DevTools，手动滚动并观察元素 computed 样式中 position 是否动态变为 sticky（而非始终显示 relative 或 static）。
真正难调的不是写法，而是它对 DOM 结构和祖先样式极其敏感——改一行父容器的 overflow，就可能让整个导航栏“掉下来”。
