结论：position: sticky 吸顶导航遮挡内容是因层叠上下文控制不当，非 bug；应给导航设 z-index 并让正文容器（如 main）设 position: relative 以建立同级层叠上下文，同时避免父容器 overflow: hidden 或意外创建新层叠上下文。
直接说结论：用 position: sticky + 合理的 top 值 + 确保父容器有明确高度或流式上下文，就能让导航吸顶且不遮挡下方内容；但若没处理好层叠上下文或滚动容器，它会“盖住”内容——这不是 bug，是 CSS 渲染规则在起作用。
为什么 position: sticky 有时会遮挡内容？
根本原因不是 sticky 本身有问题，而是它脱离普通文档流后，仍参与当前层叠上下文（stacking context）的绘制顺序。如果导航元素没有设置 z-index，又恰好后面的内容块没触发新层叠上下文（比如没设 position: relative 或 opacity: 0.99），那它就可能“浮”在内容上方。
- 移动端 Safari 对
sticky的兼容性要求父容器不能是overflow: hidden或overflow: auto（除非该容器就是滚动容器） -
top: 0是相对其最近的、具有滚动行为的祖先容器计算的，不是整个 viewport - 如果导航父容器用了
transform、filter或will-change，可能意外创建层叠上下文，干扰 z 轴顺序
如何让吸顶导航不遮挡正文？
关键不是“压低导航”，而是“抬高内容”或“明确控制堆叠顺序”。最稳妥的做法是给导航加 z-index，同时确保正文区域至少有一个基础层叠上下文。
- 导航栏必须设
position: sticky和top: 0，并显式声明z-index: 1000（数字够大即可，不用 9999） - 正文第一块内容（比如
<main>或<article>）加上position: relative，哪怕不设z-index，也能让它进入同一层叠上下文中，避免被“穿透”覆盖 - 避免给导航父容器设
overflow: hidden—— 它会截断sticky元素的吸附范围，导致吸顶失效
header {
position: sticky;
top: 0;
z-index: 1000;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
<p>main {
position: relative; /<em> 关键：建立层叠上下文，防止被导航遮挡 </em>/
}遇到 position: sticky 完全不生效怎么办？
这比遮挡更常见，通常卡在“父容器没滚动能力”或“CSS 触发条件未满足”上。
立即学习“前端免费学习笔记（深入）”；
- 检查导航的直接父容器是否设置了
height、max-height或overflow-y: auto—— 如果父容器本身不滚动，sticky就不会动 - 确保没有其他样式覆盖了
position，比如某个 reset.css 把header设成了position: static - 在 iOS Safari 中，如果页面根容器（
<html>或<body>）设了overscroll-behavior: contain，可能影响sticky行为，临时去掉试试 - 不要对
sticky元素设float、clear或display: inline-block，这些会使其退化为static
真正容易被忽略的点是：吸顶效果依赖于“滚动容器”的边界判断。很多开发者以为 sticky 总是相对于 viewport，其实它只认最近的、有滚动能力的祖先 —— 这个容器如果高度不够、或者被 transform 隔离了，吸顶就会静止不动或错位。动手前先用浏览器 devtools 检查 computed position 和滚动容器高亮，比猜快得多。
