纯 css 定位（absolute/relative）仅负责高亮条的视觉定位，真正决定高亮项的是 active 类名切换；:active 和 :target 无法持久高亮，因前者瞬时、后者作用于目标元素而非链接；滑动高亮需 relative 容器 + absolute 高亮条 + js 动态计算位置与尺寸，并注意字体加载时机。
纯 CSS 定位（position: absolute / position: relative）本身不决定“哪个菜单项该高亮”，它只负责把高亮条画在正确位置；真正触发高亮逻辑的，是类名（如 active 或 _current）的切换——定位只是视觉实现手段。
为什么不能靠 :active 或 :target 实现持久高亮
:active 只在鼠标按下瞬间生效，松开即消失，完全无法表示“当前页面”状态；:target 匹配的是 URL 片段（#about）对应的真实 id 元素，不是导航链接本身——你点导航，浏览器跳到 <section id="about"></section>，:target 作用在那个 section 上，而非 a[href="#about"]。想让它影响导航项，必须依赖 DOM 顺序（比如用 section:target ~ nav a[href="#about"]），但这种写法脆弱、不可维护、不支持 SPA 路由。
用 relative + absolute 实现滑动高亮条
这是定位在导航高亮中最典型且可控的用法：容器设 position: relative，内部加一个 div.highlight-bar 设 position: absolute，再由 JavaScript 动态设置它的 left 和 width。
-
.navbar必须设position: relative，否则.highlight-bar会相对于 body 定位，脱离菜单范围 -
.highlight-bar的bottom、left、width值需从目标li.active的getBoundingClientRect()计算得出，注意减去navbar的padding-left - 别忘了加
transition：例如transition: left 0.3s ease, width 0.3s ease，否则移动生硬 - 如果菜单项有
margin或border，计算宽度时要用offsetWidth而非clientWidth，避免差 1–2px
JavaScript 类名切换才是高亮核心
定位只是“画笔”，谁该被画、画在哪，取决于哪个元素有 active 类。这个类怎么来？
- 服务端渲染页面时，后端直接输出
@#@#@#@#@#@#@#@#@#@0 - 前端 SPA 中，监听
hashchange或popstate，解析当前路径，再用document.querySelector('a[href="' + currentPath + '"]')找到对应项并加类 - 避免用
location.pathname直接匹配：https://www.php.cn/link/387634a1c9e6dad2026967f0a0f844f6 和 https://www.php.cn/link/387634a1c9e6dad2026967f0a0f844f6/ 是不同字符串，建议统一处理末尾斜杠 - 加类前先清除所有
.active：document.querySelectorAll('.nav a').forEach(el => el.classList.remove('active'))
最易被忽略的一点：高亮条的定位依赖于菜单项的几何尺寸，而这些尺寸可能受字体加载、图片异步渲染、或 CSS font-display: swap 影响——务必等 DOMContentLoaded 后再初始化定位计算，或用 requestAnimationFrame 延迟一次确保布局稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
