媒体查询调整按钮定位后JS点击事件失效问题排查

问题背景 #

页面header采用fixed定位（top:0; left:0; width:100%），内部未指定定位的div中添加了一个按钮。采用移动端优先方案：

• 默认状态下按钮为absolute定位，right:32px，小屏幕时位于纯CSS实现的汉堡菜单左侧
• 屏幕宽度≥576px时，汉堡菜单通过@media查询隐藏
• 按钮绑定了纯JS点击事件，可切换自身textContent并修改其他元素CSS规则，在小屏幕、平板设备及主流浏览器（Chromium、Firefox）上均正常工作

为优化大屏幕（≥960px）下按钮的视觉位置，添加了如下媒体查询：

@media all and (min-width: 960px) {
  .btn {
     top: 90px;
  }
}

异常现象 #

添加上述媒体查询后，大屏幕下按钮视觉上位于header右下角附近，但点击无任何响应：

• 无论页面加载时屏幕已≥960px，还是通过调整窗口尺寸触发位置变化，问题均存在
• 修改媒体查询中position、right属性或改用fixed定位，无法解决问题
• 窗口缩小至小屏幕尺寸时，点击事件恢复正常

原因分析 #

核心原因是元素视觉位置与实际可点击区域不符，按钮被其他元素遮挡。
CSS的视觉表现具有欺骗性：按钮看起来显示在页面上，但实际被上层元素（可能是header内部未设置定位的div、header下方的其他fixed/absolute元素，或是header本身的层级问题）覆盖，导致点击事件被遮挡元素捕获，无法传递到按钮。

解决办法 #

• 排查遮挡元素：给按钮及可疑的上层元素添加临时半透明背景色（如background: rgba(255,0,0,0.5)），直观查看元素的实际覆盖范围，确认是否存在重叠。
• 调整层级关系：若确认是元素遮挡，给按钮设置更高的z-index值（如z-index: 999），确保按钮处于视觉层级的最上层。
• 校验元素尺寸：检查按钮的width、height或padding是否在大屏幕下被意外压缩，导致可点击区域消失（可通过浏览器开发者工具的元素选择器查看按钮的实际可点击范围）。

内容的提问来源于stack exchange，提问作者Joe Abbate