z-index不生效首要原因是元素position为static或父级创建了层叠上下文；必须设position为relative/absolute/fixed/sticky才生效，且子元素z-index受父级上下文限制，无法越级比较。
z-index 不生效？先查父容器有没有 position
按钮设了 z-index 却没效果，八成是它或它的某个父级没设 position。CSS 中 z-index 只对定位元素起作用——也就是 position 值为 relative、absolute、fixed 或 sticky 的元素。
常见错误：只给按钮加 position: relative; z-index: 10，但它的直接父容器仍是默认的 position: static。这时按钮的层叠上下文被“截断”，z-index 实际只在父容器内部起作用，对外无效。
- 检查按钮的最近一个有内容的父容器，加上
position: relative（最常用且安全） - 如果父容器本身是
absolute或fixed，也必须显式设置position，不能依赖继承 - 用开发者工具选中按钮，看 computed 样式里
position是否为非static，z-index是否被覆盖或计算为auto
background-image 里的图永远在按钮后面
如果你把背景图写在按钮父容器的 background-image 里，那它天然就在所有子元素“背后”，再高的 z-index 也盖不住它——因为背景图不属于层叠上下文里的“元素”，它不参与 z-index 排序。
想让按钮压住背景图？别用 background-image。换成 <img> 标签：
立即学习“前端免费学习笔记（深入）”；
- 给
<img>加position: absolute; z-index: 1 - 给按钮加
position: relative; z-index: 2 - 务必给它们共同的父容器加
position: relative，否则absolute的图片会相对视口定位，跑偏 - 装饰性图片记得加
alt=""和aria-hidden="true"，避免读屏器误读
按钮点不中？可能是 pointer-events 或遮挡层在捣鬼
视觉上按钮明明在前面，却点不动——这时候不是层级问题，而是事件被截胡了。最常踩的坑是：pointer-events: none 被误加在父层，或者某个透明遮罩层没设 z-index 却默认渲染在按钮上方。
- 在控制台执行
document.elementFromPoint(x, y)（x/y 换成按钮中心坐标），返回的节点就是真正在接收点击的那个 - 检查按钮自身和所有父级的
pointer-events计算值，确认不是none - 临时给按钮加
outline: 2px solid red，确认它是真被遮住，还是只是“点不中” - 特别注意伪元素（如
::before）和空<div>，它们可能没内容、没背景，但照样挡点击
层叠上下文一开，z-index 就失效了
你以为设个 z-index: 999 就能无敌？错。一旦某个祖先元素触发了新的层叠上下文（比如设置了 opacity: 0.99、transform、will-change 或 filter），它内部的所有 z-index 都只在这个小世界里有效，跨不出去。
这时候按钮再高，也盖不过外面一个 z-index: 1 的弹窗——因为弹窗属于另一个层叠上下文，且整体层级更高。
- 用开发者工具的 Layers 面板（Chrome）或 computed 样式里的 “Stacking Context” 提示，确认按钮是否被包裹在意外的层叠上下文中
- 避免对按钮父级滥用
transform或opacity，尤其当它本该是“透明容器”时 - 真需要动画又怕破坏层级？把动效拆到独立 wrapper 上，让按钮保持干净的层叠环境
z-index 数值本身不重要，关键是谁跟谁比、在哪一级上下文里比。很多人卡在“设了值却没反应”，其实问题早就不在按钮身上了。 
