按钮被遮挡时需先确认是否被高 z-index 的定位元素覆盖，检查 position 是否非 static、pointer-events 是否为 auto，并确保遮罩层等装饰元素层级合理且不干扰交互。
按钮被遮挡但 DOM 存在、事件已绑定，怎么办？
不是 JS 绑定错了，而是它被别的元素“盖住”了——鼠标事件根本没传到它身上。常见于 .bg-backdrop、#name_shine、.hero__bg 这类视觉装饰层，或浮动/绝对定位的容器。
- 先打开开发者工具，选中按钮，看它的
:hover是否触发；不触发基本就是被遮挡 - 再检查按钮父级和相邻兄弟元素：有没有
position: fixed或absolute的全屏/大尺寸元素？有没有未清除的float导致边界框上移覆盖？ - 特别注意透明遮罩层（如
opacity: 0.2的.bg-backdrop）：哪怕半透明，只要pointer-events: auto（默认值），就会拦截点击
z-index 不生效？先确认 position 是否设置
z-index 对 position: static 完全无效——这是最常踩的坑。动态创建的 button 默认就是 static，光写 button.style.zIndex = "100" 没用。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 必须同时设置
button.style.position，推荐"relative"（不脱离文档流，不影响布局） - 避免用
setAttribute('style', '...')拼字符串，容易覆盖已有样式；优先用element.style.xxx - 如果要用 CSS 类，确保该类里同时包含
position和z-index，例如：.interactive-btn { position: relative; z-index: 100; }
多个定位元素堆叠，怎么定 z-index 数值？
不要无脑写 z-index: 9999。层级关系要清晰、可维护，且所有参与比较的元素必须在同一个层叠上下文中。
- 基础层（内容区）设
z-index: 0或不设（默认） - 遮罩层（如
.bg-backdrop）设z-index: 10，导航容器（如.wrapper）设z-index: 20 - 交互控件（按钮、关闭图标）设
z-index: 30或更高，但必须比其直接父容器高 - 动画文字、背景图等纯装饰元素，主动设
z-index: -1或0，别依赖 DOM 顺序“碰运气”
还有哪些隐藏干扰项？
即使 z-index 和 position 都对了，也可能点不动——得查这些“静默杀手”：
-
pointer-events: none：父级或自身设置了这个，整个元素就拒收鼠标事件 -
transform或will-change：可能意外创建新层叠上下文，让z-index只在子上下文中生效 - 浮动未清除：比如按钮用了
float: right，但父容器没overflow: hidden或::after清除，导致后续块级元素的 margin 上移覆盖按钮 - 背景图用
<img>标签实现时，记得给它加z-index: 1并设position: absolute，否则会自然层叠在按钮下方
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
