z-index无效是因为按钮未定位或被父级层叠上下文限制；必须设置position（如relative）并确保与遮挡元素处于同一层叠上下文中，否则z-index值再大也无效。
按钮被遮挡时 z-index 为什么无效
直接给按钮加 z-index: 999 却没用，大概率是因为它没定位——z-index 对 position: static（默认值）完全不生效。浏览器会忽略这个声明，按钮依然按 DOM 顺序渲染，后出现的元素自然盖住它。
常见错误现象包括：固定在右上角的按钮滚动到底部后点不了、下拉菜单展开后被标题挡住、弹窗里的确认按钮无法点击。
- 检查按钮是否设置了
position: relative、absolute、fixed或sticky - 如果父容器用了
transform、opacity: 0.99或filter: blur(1px)，它会创建新的层叠上下文，按钮的z-index只能在该容器内比较，再大也出不去 - 不要只看按钮自己，还要看它和遮挡元素是否处于同一层叠上下文；否则比数值毫无意义
如何正确设置按钮和遮挡元素的 z-index 关系
关键不是堆数字，而是建立清晰的层级逻辑：按钮必须比它要“浮”在上面的所有元素层级更高，且它们得在同一个层叠上下文中可比。
- 遮挡元素（如导航栏、背景图容器）需有
position+ 明确z-index，比如.navbar { position: fixed; z-index: 10; } - 按钮自身必须定位，例如
.btn { position: relative; z-index: 11; }（比10高即可，不必写9999） - 若按钮嵌套在某个
transform容器里，要么把transform移到子元素上，要么让该容器也参与层级竞争（加position: relative; z-index: 1）
伪元素或动画文字遮挡按钮怎么办
像 ::before、::after 或 #name_shine 这类装饰性元素，常因未设 z-index 默认跑到最顶层，把按钮盖住。
立即学习“前端免费学习笔记（深入）”；
- 给伪元素或动画文字显式设
z-index: 0，前提是它已定位（position: absolute或relative） - 避免用
z-index: -1：部分浏览器会让元素彻底失去鼠标响应，尤其在移动端 - 如果伪元素是全屏覆盖（如
body::before），务必确保按钮所在容器有更高z-index且自身已定位
Vue/React 中动态元素的 z-index 坑点
组件化框架里，v-if 或 useState 控制显隐的弹窗按钮，容易因父组件未创建层叠上下文而失效。
- 弹窗容器（如
.modal）必须带position: fixed和z-index，不能只靠子元素撑起层级 - 不要把
z-index写在条件渲染的子节点上，而应写在最外层容器；否则每次重渲染可能重置层叠上下文 - 检查是否有 CSS-in-JS 库自动加了
transform或will-change，它们会悄悄创建新层叠上下文
真正卡住的往往不是数值大小，而是某一层父元素静默创建了层叠上下文，又没暴露出来——查 computed styles 里的 “Stacking Context” 字样，比盲调 z-index 有效得多。
