CSS中如何基于定位实现菜单项高亮

纯 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 类。这个类怎么来？

立即学习“前端免费学习笔记（深入）”；

• 服务端渲染页面时，后端直接输出 <a href="https://www.php.cn/link/387634a1c9e6dad2026967f0a0f844f6" class="active">关于</a>
• 前端 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 延迟一次确保布局稳定。