这个问题问得特别好——很多人第一次用这个自定义文件上传按钮的技巧时，都会被这个“点击穿透”的现象搞懵，我们一步步拆解背后的原理：

首先得纠正一个关键的误解：你的代码里，那个设置了opacity:0的file input其实在交互堆叠层级上，是在按钮的上方，并不是你以为的“下层元素”。原因很简单：它是position:absolute的定位元素，而普通按钮是静态定位（默认position:static）。在CSS的堆叠规则里，所有非static定位的元素，堆叠层级都会高于静态定位元素——哪怕它是完全透明的，依然在交互层面压在按钮上面。

接下来我们拆解核心逻辑：

1. opacity:0不剥夺元素的交互能力 #

很多人会把opacity:0和display:none、visibility:hidden搞混：

• display:none：元素完全从文档流中移除，既看不见也不能交互
• visibility:hidden：元素视觉隐藏，但依然占据空间，也无法响应交互
• opacity:0：只是让元素完全透明，它依然在文档流里，所有交互事件（点击、hover等）都能正常响应

2. 浏览器的点击测试规则 #

当你点击页面上的某个位置时，浏览器会做一个「点击测试（hit testing）」：从当前堆叠层级最高的元素开始，检查点击坐标是否落在这个元素的范围内，找到第一个匹配的元素后，就触发它的点击事件，不会再往下找。

回到你的代码：

• #wrapper设置了position:relative，创建了一个独立的堆叠上下文
• #file-input-below是position:absolute，相对于wrapper定位，尺寸和按钮完全重合，而且堆叠层级比静态定位的按钮更高
• 虽然file input是透明的，但点击按钮所在的位置时，浏览器第一个检测到的是这个上层的透明file input，自然就触发了它的点击事件——也就是弹出文件选择框。

3. 和遮罩场景的区别 #

你提到“遮罩下的按钮无法点击”，那是因为遮罩元素是可见的上层元素，点击测试会先命中遮罩，而遮罩本身如果没有绑定点击事件，也不会把事件传递给下层按钮（除非你特意用事件冒泡/委托处理）。但你的场景刚好相反：按钮是堆叠层级的下层，点击根本碰不到它，直接被上层的透明file input拦截了。

快速验证方法 #

你可以给#file-input-below临时加个background: rgba(255,0,0,0.5)，就能看到它完全覆盖在按钮上面，这时候点击半透明的红色区域（也就是按钮的位置），触发file input就完全合理了。

最后补充个小优化：如果想让逻辑更清晰，也可以给按钮设置pointer-events: none（让按钮不响应点击事件），不过在你的现有代码里其实不需要——因为file input已经在堆叠上层了，点击本来就会命中它。

内容的提问来源于stack exchange，提问作者Algon Janer