本文详解如何通过合理设置 CSS z-index 值，修复页面中发光文字动画（如姓名闪动效果）覆盖导航菜单、导致按钮无法点击的问题，确保交互元素正确分层显示。
本文详解如何通过合理设置 css `z-index` 值，修复页面中发光文字动画（如姓名闪动效果）覆盖导航菜单、导致按钮无法点击的问题，确保交互元素正确分层显示。
在构建响应式网页时，视觉动效（如渐变文字动画）与交互组件（如侧边导航栏）共存时，常因层叠上下文（stacking context）管理不当而引发遮挡问题。典型表现是：导航栏展开后，动画文字仍“悬浮”于其上方，不仅视觉干扰严重，更直接导致 <a> 链接无法触发点击——因为鼠标事件被上层元素拦截。
根本原因在于：z-index 仅对定位元素（即 position 值为 relative/absolute/fixed/sticky 的元素）生效，且其数值需在同一个层叠上下文中比较才有意义。原代码中：
- .wrapper（导航背景容器）虽设为 position: fixed，但未声明 z-index，默认处于基础层；
- .menu-btn（汉堡按钮）设置了 z-index: 2，但其父级 <div> 无定位，导致该 z-index 在全局层叠中作用受限；
- #name_shine（动画文字）虽为 position: relative，却完全未设置 z-index，使其默认位于文档流顶层（尤其当其他元素 z-index 缺失时），从而“压住”导航。
✅ 正确解法是显式定义所有关键元素的 z-index，并确保层级逻辑清晰：
- 导航背景 .wrapper：z-index: 2 —— 作为弹出层主体，需高于页面内容；
- 导航按钮 .menu-btn：z-index: 3 —— 必须高于 .wrapper，确保始终可点击；
- 动画文字 #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; /* ← 高于 wrapper，保证按钮可操作 */
right: 20px;
top: 20px;
/* ...其他样式保持不变... */
}
#name_shine {
position: relative;
/* ...动画相关样式保持不变... */
z-index: 0; /* ← 主动置于底层，让出交互空间 */
}⚠️ 注意事项：
- 不要依赖 z-index: -1（如原 .content 所用）：负值可能导致元素脱离可点击范围，且在部分浏览器中行为不一致；
- 避免过度嵌套定位元素：每新增一个 position + z-index 组合，都可能创建新的层叠上下文，使层级关系复杂化；
- 测试响应式场景：在移动端小屏幕下，确认 z-index 在不同视口宽度下依然有效（本例中 .wrapper 为 fixed，天然适配）；
- 若使用第三方图标库（如 Font Awesome），确保 <i> 标签未意外提升层级——通常无需额外 z-index。
最终效果：导航栏展开时，#name_shine 文字自然退居背景，.wrapper 菜单完整显示，所有链接可正常点击，视觉与功能达成统一。这不仅是样式调试，更是对 CSS 层叠规则的实践深化——精准控制 z-index，是构建健壮交互界面的基础能力。
