本文详解通过合理设置 CSS z-index 层叠顺序，修复动画文字（如发光姓名）覆盖导航菜单导致点击失效的问题，确保导航栏在展开时始终位于最上层，可正常交互。
本文详解通过合理设置 css `z-index` 层叠顺序，修复动画文字（如发光姓名）覆盖导航菜单导致点击失效的问题，确保导航栏在展开时始终位于最上层，可正常交互。
在构建响应式单页网站时，常会为标题或姓名添加视觉动效（如渐变光扫动画），但若未正确管理元素堆叠上下文（stacking context），极易引发层叠错乱：动画文字虽美观，却意外覆盖了导航栏、按钮等交互区域，造成“看似可点实则失灵”的体验问题——正如你在打开导航栏后无法点击菜单项，只能误触背后的动画文本。
根本原因在于：#name_shine 使用了 position: relative 但未声明 z-index，而 .wrapper（导航遮罩层）和 .menu-btn（汉堡按钮）也缺乏显式层级定义。浏览器按默认文档流与定位规则生成层叠顺序，导致 #name_shine 实际渲染在 .wrapper 之上，形成“视觉可见但逻辑阻断”。
✅ 正确解法是主动、明确地建立层叠关系：
- .wrapper（全屏导航背景）需置于中间层，设 z-index: 2；
- .menu-btn（触发按钮）必须最高，确保始终可点击，设 z-index: 3；
- #name_shine（动画文字）应退居底层，设 z-index: 0，使其不干扰任何交互元素。
以下是关键样式修正段（已整合进完整代码）：
.wrapper {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
/* ...其他样式保持不变... */
z-index: 2; /* 关键：导航层中层 */
}
.menu-btn {
position: absolute;
z-index: 3; /* 关键：按钮最高，永远可点 */
right: 20px; top: 20px;
/* ...其他样式保持不变... */
}
#name_shine {
position: relative;
/* ...动画相关样式保持不变... */
z-index: 0; /* 关键：文字退至底层，不遮挡 */
}
⚠️ 注意事项：
- z-index 仅对定位元素（即 position 值为 relative/absolute/fixed/sticky）生效，普通静态元素设置无效；
- 避免滥用负 z-index（如原代码中 .content { z-index: -1 }），易引发不可预期的父容器裁剪或遮挡，建议统一用非负整数并保持逻辑递增；
- 若页面引入第三方图标库（如 Font Awesome），请确认 标签未被意外提升层级，必要时为其父级 .menu-btn 显式设置 z-index 即可覆盖。
通过三行 z-index 的精准调控，你无需重写动画逻辑或重构 DOM 结构，即可让炫酷的姓名光效与实用的导航系统各司其职：动画负责吸睛，导航专注交互——这才是专业前端体验的底层逻辑。
