如何用CSS实现顶部吸顶导航且不遮挡内容？

position: sticky + html { scroll-padding-top } 是现代浏览器下最稳、最轻量的解法；需将 scroll-padding-top 写在 html 上，准确计算导航视觉高度，并避开 overflow、Flex/Grid、transform 等 sticky 失效陷阱。

直接结论：用 position: sticky + html { scroll-padding-top } 是现代浏览器下最稳、最轻量的解法；但必须写对位置、算准高度、避开 sticky 失效陷阱。

为什么 scroll-padding-top 必须写在 html 上

浏览器滚动锚点（href="#about"）的终点计算，只认根滚动容器——也就是 html 元素。写在 body 或目标元素（如 #about）上，Safari 和旧 Edge 直接忽略，Chrome 虽部分支持但行为不一致。

1. html { scroll-padding-top: 64px; } ✅ 生效，全局锚点跳转自动上移 64px
2. body { scroll-padding-top: 64px; } ❌ Safari 中无效，页面跳转后内容仍被盖住
3. #about { scroll-padding-top: 64px; } ❌ 完全无作用，该属性不作用于目标元素本身

怎么算出准确的“视觉总高度”给 scroll-padding-top

别只看导航栏的 height 值。它实际占据的垂直空间 = height + padding-top + border-top-width + box-shadow 的垂直扩散（尤其 spread 值大的阴影），甚至 transform: translateY(-100%) 这类隐藏逻辑也会让 DOM 高度失真。

1. 打开 DevTools → 选中导航栏 → 切到 Computed 面板，手动加总：height、padding-top、border-top-width、box-shadow 的垂直分量
2. 移动端折叠后变矮？别写死 64px，用媒体查询：@media (max-width: 768px) { html { scroll-padding-top: 48px; } }
3. 推荐抽成 CSS 变量：:root { --nav-height: 64px; }，再写 html { scroll-padding-top: var(--nav-height); }

position: sticky 不生效的三个高频原因

不是你没写 top，而是某层祖先悄悄截断了粘性链。用 DevTools 逐层检查 computed styles，重点盯这三类：

1. 任意祖先设了 overflow: hidden、overflow: auto 或 overflow: scroll —— 这会创建新的粘性边界，sticky 只在该容器内起效
2. 父容器是 Flex/Grid，但没给导航栏设 min-height，或父项 align-items: stretch 导致高度算成 0
3. 导航栏自身或某层父元素用了 transform、filter 或 will-change —— 这些强制创建新层叠上下文，直接禁用 sticky

另外，top 必须显式设置单位（top: 0 合法，top: 0px 更明确），且它的含义是“距原始位置顶部多少像素才开始吸附”，不是“离视口顶部距离”。

scroll-padding-top 和 scroll-margin-top 别混用

两者都影响锚点滚动终点，但机制不同：前者是全局偏移（作用于根滚动容器），后者是单个元素的滚动外边距。如果同时设置，浏览器会把两个值相加，导致目标元素下移过多、留白过大。

1. 优先用 html { scroll-padding-top }：一劳永逸，适配所有锚点
2. 只有当你无法控制 html 样式（比如嵌入第三方 iframe），才退而求其次，在每个目标元素上单独加 scroll-margin-top
3. 绝对不要在同一个项目里既设 html { scroll-padding-top } 又给 #about 加 scroll-margin-top

真正容易被忽略的是：吸顶导航若用了 position: sticky，而高度又随滚动动态变化（比如菜单展开/收起），scroll-padding-top 是静态值，不会响应变化——此时要么改用 position: fixed + 动态 body padding-top，要么放弃 CSS 方案，用 JS 精确控制 scrollIntoView 的 offsetTop。