当为导航栏添加 ScrollReveal 动画后，.sidebar 侧边栏常因层叠上下文（stacking context）异常而被页面内容覆盖，即使设置了高 z-index 也无效；根本解法是确保 header 容器创建独立且优先的层叠上下文。
当为导航栏添加 scrollreveal 动画后，`.sidebar` 侧边栏常因层叠上下文（stacking context）异常而被页面内容覆盖，即使设置了高 `z-index` 也无效；根本解法是确保 `header` 容器创建独立且优先的层叠上下文。
在使用 ScrollReveal.js 时，动画初始化会隐式触发某些元素（如 <header></header> 或其子容器）生成新的层叠上下文（例如通过 transform、opacity、filter 等 CSS 属性）。而你的 .sidebar 虽设了 z-index: 999，但它隶属于 <nav></nav> 内部，而 <nav></nav> 又嵌套在 <header></header> 中——一旦 <header></header> 因 ScrollReveal 的 origin: "left" 触发了 transform（ScrollReveal 默认内部使用 transform: translateX() 实现位移动画），它就会成为一个新的层叠上下文根节点。此时，.sidebar 的 z-index 仅在其父级（即 <header></header>）内部生效，无法超越 <header></header> 自身在全局堆叠顺序中的层级。
✅ 正确解决方案：为 <header></header> 显式声明高 z-index 并确保其成为顶层定位容器
header {
position: relative; /* 必须设置 position 才能使 z-index 生效 */
z-index: 9999; /* 高于所有页面主体内容（如 main、section 等） */
}⚠️ 注意：不要依赖
!important，除非你确认有强优先级样式冲突（如第三方框架或内联样式）。优先通过提升选择器特异性或调整样式加载顺序来覆盖，例如将上述规则放在自定义 CSS 文件末尾。
同时，请检查页面主体内容区域（如 <main></main>、<section></section> 或直接子元素）是否意外设置了 position: relative/absolute/fixed + z-index。常见错误示例如下：
/* ❌ 危险：无意中让内容层高于 header */
main {
position: relative;
z-index: 1000; /* 若 > header 的 z-index，则必然遮挡 sidebar */
}✅ 推荐调试步骤（浏览器开发者工具 F12）：
- 右键点击被遮挡的
.sidebar→ “检查元素”； - 在 Computed 面板中搜索
z-index和position，确认其实际生效值； - 展开
<header></header>元素，查看是否被 ScrollReveal 添加了transform（如transform: translateX(-100px)）； - 选中
<header></header>，在 Layers 面板（Chrome）中观察其是否已形成独立层叠上下文； - 临时在控制台执行
document.querySelector('header').style.zIndex = '9999'测试是否立即修复。
? 进阶建议：避免 ScrollReveal 对 <header></header> 整体做位移动画（因其含交互式侧边栏）。可改为仅对 logo 和 nav 列表做动画，保留 .sidebar 不参与 reveal：
// ✅ 更安全的动画配置
ScrollReveal().reveal(".logo, nav > ul:not(.sidebar)", {
delay: 200,
origin: "right",
});
ScrollReveal().reveal(".menu-button", {
delay: 250,
origin: "right",
});
// ❌ 移除对 "header" 和 "nav" 的全局 reveal，防止 transform 波及 sidebar总结：侧边栏被遮挡不是 z-index 不够高，而是层叠上下文层级错位所致。核心原则是——让包含浮动 UI（如 sidebar）的容器（<header></header>）成为最高层叠上下文的根，并杜绝其父级或兄弟元素意外抢占堆叠顺序。
