按钮z-index不生效是因为未建立层叠上下文，需先设position（如relative）再设z-index；父容器若触发新层叠上下文（如transform、opacity<1），子元素z-index将被截断，须检查父级定位及层叠上下文属性。
按钮的 z-index 不生效？先确认父容器是否是定位上下文
直接给 button 设置 z-index 却没反应，大概率是因为它没有建立自己的层叠上下文（stacking context）。z-index 只对「已定位元素」（即 position 为 relative、absolute、fixed 或 sticky）生效。
常见错误：只写 z-index: 999;，但忘了加 position: relative;
- 正确写法：
button { position: relative; z-index: 10; } - 如果按钮在
div内，而该div本身有position: absolute且z-index: 1，那按钮的z-index: 10是相对于这个div的层叠上下文，不是全局最高——层级比较只在同一个层叠上下文中进行 - 避免滥用
position: absolute给按钮，否则可能破坏文档流布局，尤其在响应式场景下容易错位
多个按钮重叠时，z-index 数值怎么设才可靠？
数值本身没有“绝对高低”，只在同级层叠上下文中起作用。两个按钮若属于不同定位祖先，它们的 z-index 互不干扰。
- 确保它们处于同一层叠上下文：比如都放在同一个
position: relative的容器内 - 用小跨度整数（如
1、2、3），别一上来就写999999——后续要插入中间层级时会很被动 - 注意浏览器默认样式影响：原生
button在某些 UA 样式中可能带position: static和隐式层叠行为，显式声明position才可控
按钮被其他元素（比如下拉菜单、弹窗）遮挡？检查层叠上下文边界
最常被忽略的一点：父级元素设置了 opacity < 1、transform、filter、will-change 等属性，会强制创建新的层叠上下文，导致子元素的 z-index 被“截断”。
立即学习“前端免费学习笔记（深入）”；
- 例如：一个弹窗容器用了
transform: translateY(0)，即使没设z-index，也会生成新层叠上下文；里面按钮再设z-index: 9999，也盖不过外面未被该上下文包裹的导航栏 - 调试技巧：在 DevTools 中选中按钮，看“Computed”面板里
z-index是否显示为有效值（非auto），同时观察其“Stacking Context”层级路径 - 临时验证方式：给疑似“截断父级”加
outline: 1px solid red，快速识别哪些容器意外触发了层叠上下文
移动端按钮层级异常？留意 iOS Safari 的 fixed 定位陷阱
iOS Safari 对 position: fixed 元素的层叠处理和桌面端不一致，尤其配合 z-index 时容易出现按钮被输入框、软键盘或地址栏遮挡。
- 不要依赖
fixed+ 高z-index强行“压”过系统 UI；改用position: absolute并动态调整top值更稳妥 - 避免在
body上直接设z-index—— 它不会创建层叠上下文，反而可能引发兼容性问题 - 真机测试比模拟器更重要：某些
z-index行为在 Chrome 模拟器里正常，到 iPhone 上就失效
z-index 写得不够大，而是没理清谁跟谁在比、在哪一层里比。花两分钟看一眼父级的 position 和触发层叠上下文的属性，比反复调数字快得多。 
