按钮点不了是因为z-index未生效：元素position为static时不参与层叠计算；父级含transform/opacity等会创建独立层叠上下文，锁死子元素；需用DevTools检查Computed中position值及Layout面板中Stacking context。
z-index写了但按钮点不了，先看position有没有生效
浏览器压根不处理z-index，只要元素position是static（默认值），它就完全不参与层叠计算——点不了不是“被盖住”，是“根本没出现在可点击层”。
- 用 DevTools 选中按钮，在 «Computed» 面板搜
position，如果显示static，那z-index就是摆设 - JS 动态创建时常见漏写：
button.style.zIndex = "999"但没配button.style.position = "relative"或"fixed" -
display: flex容器里的子项能用z-index调顺序，但前提是它自己已设position非static；否则只按 DOM 顺序渲染，且无法穿透父级上下文
移动端特别容易被父级transform/opacity“静默关盒”
iOS Safari 对transform、opacity、filter极其敏感——只要父级用了这些属性（哪怕transform: translateZ(0)或opacity: 0.999），就会创建独立层叠上下文，把子元素锁死在里面。更糟的是，它会让position: fixed退化成absolute，失去视口定位能力。
- 现象：按钮
z-index: 9999，却点不到；DevTools 里z-index字段灰显或标为(not applicable) - 快速验证：临时注释掉父级的
transform、opacity、filter，看按钮是否立刻可点 - 重点检查
html和body标签：iOS 下html { transform: translateZ(0) }会整页变成一个上下文，“最高”的弹窗也出不去
用DevTools精准定位哪个父级在“拦路”
别从按钮往下调z-index，要往上翻 DOM 树，找第一个“突然变成层叠上下文根”的节点。Chrome DevTools 的 «Layout» 面板直接告诉你答案。
- 在 Elements 面板逐级点击按钮的父节点，右侧面板切换到 «Layout» 标签页，盯住 «Stacking context» 字段
- 一旦某层显示
Yes，而你没主动给它设过z-index或position，大概率就是它触发了：opacity 、transform != none、filter != none、will-change: transform等 - 注意
z-index: 0和z-index: auto的区别：前者只要元素已定位，就会强制创建新上下文；后者不会——加个0可能正是问题源头
动态浮层必须手动提级，不能只靠改数值
修复不是堆z-index，而是让按钮既“能定位”，又“不被关住”。尤其对 JS 动态插入的 toast、picker、dropdown，光设z-index没用。
- 最稳妥做法：
document.body.append(button)，再用position: fixed+ JS 计算top/left定位 - 若必须保留在原 DOM 位置，且父容器必须保留
transform（如动画），那就给共用父级显式加position: relative+z-index: 1，让它成为统一上下文根，避免碎片化隔离 - 滚动偏移必须手动处理：挂到
body后，监听window.scrollY并更新top值，否则 fixed 按钮会随页面滚动错位
真正卡住你的，往往不是按钮本身，而是它上面第三层那个没写z-index却悄悄开了transform: scale(1)的 wrapper。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
