scroll-margin-top 必须写在目标元素上，值等于导航栏真实视觉总高度，目标需有合法id或name，且不能受float、inline显示、transform、overflow:hidden等破坏滚动上下文的css影响。
scroll-margin-top 必须写在目标元素上，不是 body 或 nav
浏览器锚点跳转时，滚动定位的“吸附点”是目标元素（如 #contact、h2[id]）自身的盒模型上边缘。该属性只对它直接作用的元素生效，写错位置就完全不触发。
常见无效写法：
-
body { scroll-margin-top: 64px; }—— body 不是滚动定位主体，被忽略 -
nav { scroll-margin-top: 64px; }—— 导航栏不是被跳转的目标，无意义 -
:target { scroll-margin-top: 64px; }—— Safari 偶现失效，且无法响应不同页面导航高度变化
正确写法示例：
section#about { scroll-margin-top: 64px; }
h2[id] { scroll-margin-top: calc(var(--nav-height) + 8px); }
div[data-id="faq"] { scroll-margin-top: 4rem; }
值必须等于导航栏真实视觉总高度，不能只看 height
遮挡来自导航栏实际占据的垂直空间总量，包括：height + padding-top + border-top-width + box-shadow 向上扩散部分。仅靠 CSS 文件里写的 height: 60px 极易出错。
- 用 DevTools 的 Computed 面板查导航栏最终渲染高度最准
- 移动端折叠后变矮（如从 64px → 48px），写死像素值会遮挡
- 推荐抽成 CSS 变量统一管理：
:root { --nav-height: 64px; }，再在目标上引用 - 避免用
%单位——它按视口宽度计算，和高度无关
目标元素必须带合法 id 或 name 才能被识别为锚点
浏览器只对有 id（如 section#features）或 name（如 <a name="support"></a>）的元素执行原生锚点跳转。普通 <div> 即使加了 <code>scroll-margin-top 也不会触发。
- ✅ 正确：
<h2 id="faq">常见问题</h2>→ 可被#faq链接跳转 - ❌ 错误：
<div class="section"> → 浏览器根本不识别它是锚点目标 <li>⚠️ 注意：CMS 或富文本编辑器可能自动移除 <code>id，或生成含空格/中文的非法 ID，需检查生成后的 HTML 源码 - 父容器用了
float但未清除 → 导致getBoundingClientRect()返回失真坐标 - 目标元素是
display: inline或display: flex→ 它不是块级流内元素，无法准确吸附 - 目标元素本身用了
transform: translateY()→ 创建新包含块，破坏定位上下文 - 目标容器设置了
overflow: hidden或clip-path→ 切断滚动上下文链路
注意破坏滚动上下文的 CSS 特性
以下情况会让 scroll-margin-top 失效，因为目标元素脱离了标准流或滚动容器链路：
修复建议：给目标元素父容器加 display: flow-root;（比 overflow: hidden 更安全，不裁剪 position: absolute 子元素）。
别同时设 scroll-padding-top 和 scroll-margin-top，它们机制不同但最终都影响滚动终点，叠加会导致目标被顶出视口。选一个，用对位置，值算准，才是稳的。
