position: sticky 是现代浏览器实现导航栏吸顶最简单可靠的方式，需显式设置 top 值且父容器不能有 overflow、transform 等干扰属性。
用 position: sticky 实现导航栏吸顶最简单可靠
现代浏览器中，position: sticky 是让导航栏始终停在顶部的首选方案，它比 position: fixed 更自然，不脱离文档流，滚动时自动触发，也不需要 JS 监听。
常见错误是直接给导航栏加 position: sticky 却没设 top 值，或者父容器有 overflow: hidden 或 transform 导致粘性失效。
-
top必须显式设置（如top: 0），否则不会生效 - 父级不能有
overflow: hidden、overflow: auto或transform等会创建新层叠上下文/块格式化上下文的属性 - 推荐写法：
.nav { position: sticky; top: 0; z-index: 100; } - 如果导航栏在
<header></header>内，确保<header></header>没加干扰样式
遇到 position: sticky 不生效？先查这三处
不是浏览器不支持（Chrome 56+/Firefox 59+/Safari 6.1+ 都支持），而是被隐性条件拦住了。
- 检查父容器是否设置了
overflow：哪怕只是overflow: hidden在 body 或 wrapper 上，都会让 sticky 失效 - 检查是否有
transform、filter、will-change等触发新层叠上下文的 CSS，它们会让 sticky “失去参照” - 确认元素本身没有
float或clear，sticky 不适用于浮动元素
快速验证方法：临时给导航栏加个 background: red 和 border: 1px solid，再滚动看是否出现——没出现，八成是父容器问题。
立即学习“前端免费学习笔记（深入）”；
需要兼容老浏览器（比如 IE）？position: fixed 是唯一选择
IE 完全不支持 sticky，若项目仍需支持 IE11 或更早版本，只能退回 fixed，但得手动处理布局断层。
-
position: fixed会让导航栏脱离文档流，下面内容会“上移”，必须给body或主内容区加padding-top补齐高度 - 移动端要注意
fixed在 iOS Safari 中可能有滚动卡顿或键盘弹出后错位问题 - 如果页面有侧边栏或响应式折叠菜单，
fixed下的宽度计算容易出错，建议用width: 100vw而非100%
示例补白：body { padding-top: 60px; } .nav { position: fixed; top: 0; width: 100vw; }
导航栏吸顶后遮挡内容？z-index 和层级陷阱要小心
吸顶后被其他元素盖住，表面是 z-index 问题，实际常因父容器层叠上下文被意外创建。
- 只给导航栏设
z-index不够，它的父容器如果有z-index（哪怕值为 auto）、opacity 、<code>transform等，就会截断层级传播 - 避免在
body或全局 wrapper 上乱加transform，这是最隐蔽的层级“封印” - 调试技巧：在开发者工具里选中导航栏，看 computed 样式中
z-index是否生效；再点父节点，看stacking context是否被触发
真正复杂的是多层嵌套 + 动态组件（比如 Vue/React 中导航栏被包裹在高阶组件里），这时候 sticky 的参照容器可能不是你以为的那个。
