按钮点不了，先看是不是被盖住了；需检查是否被兄弟元素、遮罩层或伪元素视觉遮挡，确认z-index生效前提（必须设position），排查父容器是否创建层叠上下文，遮罩层优先用pointer-events: none透传点击。
按钮点不了，先看是不是被盖住了
动态插入或嵌套很深的按钮无法响应点击，90% 不是事件没绑上，而是鼠标根本没点到它——高亮区域跳到别的 DOM 节点上，说明有兄弟元素、遮罩层或父容器的伪元素在视觉上挡住了它。打开 DevTools 悬停检查，确认高亮的是目标 button 本身，而不是它后面那个 div 或 .overlay。
- 常见遮挡源：
.bg-backdrop（position: fixed+z-index: 0）天然压过未定位按钮 - 后续兄弟元素用了
position: relative但没设z-index，按默认层叠规则会盖住前面的static元素 -
::before或全屏body::after这类装饰性伪元素，默认渲染在顶层，且常被忽略
z-index 生效的前提：必须显式设 position
z-index 对 position: static（默认值）完全无效，浏览器直接忽略。哪怕你用 JS 写 el.style.zIndex = "999"，只要没同时设 el.style.position = "relative"，就等于白写。
- 推荐用
position: relative：不脱离文档流，微调安全，适合大多数按钮 - 避免用
setAttribute('style', 'z-index:999')拼接——容易漏掉position，改用分步赋值更可靠 -
position: sticky要小心：滚动出边界后退化为relative，z-index行为可能突变
父容器悄悄创建了层叠上下文，子元素 z-index 就废了
只要任意一个祖先节点满足以下任一条件，就会创建独立的层叠上下文（stacking context），子元素的 z-index 只能在该容器内部比大小，再大也出不去：
-
opacity小于 1（比如opacity: 0.99） -
transform不为none（哪怕只是transform: translateZ(0)） -
filter、will-change、isolation: isolate
调试方法：Chrome DevTools → 「Computed」面板 → 搜索 “Stacking Context”，看哪个祖先标着 “This element establishes a stacking context”。临时删掉它的 transform 或 opacity，如果按钮立刻“浮上来”，就坐实了问题。
遮罩层场景下，pointer-events 是更快解法
如果按钮被一层纯展示用的遮罩（如模糊背景、半透明蒙版）盖住，且遮罩本身不需要交互，加 pointer-events: none 比硬调 z-index 更直接：
.overlay {
position: absolute;
z-index: 50;
pointer-events: none;
}
.overlay > .close-btn {
pointer-events: auto;
}
注意：pointer-events: none 会让整个遮罩及其所有子元素失效，所以需要交互的控件（如关闭按钮）必须单独设回 auto。这个技巧在移动端尤其稳定，避开 Safari 对频繁 z-index 修改的渲染异常。
真正卡住的往往不是数字大小，而是某一层父元素静默创建了层叠上下文，又没暴露在样式表里——它可能来自框架组件、CSS-in-JS 库，甚至是一行被遗忘的 transform: translateX(1px)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
