本文详解通过合理设置 CSS z-index 层级顺序，解决动画文字覆盖导航菜单导致点击失效的问题，确保导航栏始终位于内容之上、交互正常。
本文详解通过合理设置 css `z-index` 层级顺序，解决动画文字覆盖导航菜单导致点击失效的问题，确保导航栏始终位于内容之上、交互正常。
在构建响应式网页时，视觉动效（如渐变文字闪烁、光效滑动等）能显著提升页面吸引力。但若未正确管理元素堆叠上下文（stacking context），动画元素极易“浮”在其他交互区域之上——正如你在项目中遇到的问题：#name_shine 动画文字始终显示在 .wrapper 导航层上方，不仅遮挡菜单项，更直接拦截鼠标事件，导致导航链接无法点击。
根本原因在于：z-index 仅对定位元素（即 position 值为 relative/absolute/fixed/sticky 的元素）生效，且其数值必须形成明确的层级关系。你原代码中：
- .wrapper（导航容器）虽设为 position: fixed，但未声明 z-index，默认处于文档流自然堆叠层；
- .menu-btn（汉堡按钮）设置了 z-index: 2，但其父级 无定位，导致该 z-index 在局部上下文中生效，无法全局压制其他同级元素；
- #name_shine 使用 position: relative，却完全未设置 z-index，因此按 DOM 顺序后出现、后渲染，自然覆盖在 .wrapper 之上。
✅ 正确解法是显式定义三者的堆叠顺序，形成清晰的“背景 → 导航层 → 按钮 → 内容”的垂直结构：
.wrapper { position: fixed; /* ...其他样式保持不变... */ z-index: 2; /* 确保导航菜单层位于内容之下、按钮之下 */ } .menu-btn { position: absolute; z-index: 3; /* 按钮需高于导航层，保证可点击且视觉突出 */ /* ...其余样式... */ } #name_shine { position: relative; z-index: 0; /* 主动降级至底层，避免遮挡任何交互区域 */ /* ...其余动画样式... */ }⚠️ 注意事项：
- z-index 不支持百分比或 auto（除默认值外），必须为整数；
- 避免滥用过高数值（如 z-index: 9999），推荐使用小范围整数（如 0/1/2/3）并配合语义化命名（如 --z-nav, --z-overlay）便于维护；
- 若导航 .wrapper 内部有子元素（如
- 所有参与层叠的元素必须有 position 属性，否则 z-index 无效。
最终效果：点击汉堡按钮后，.wrapper 展开覆盖全屏，所有导航链接清晰可见且可点击；#name_shine 文字稳定居于背景层，仅作为视觉装饰，不再干扰任何交互。这一原则同样适用于模态框、下拉菜单、悬浮提示等需要精确控制层叠关系的场景——布局即逻辑，层级即体验。
