label被遮挡主因是层叠上下文或布局塌陷导致物理覆盖，根本收不到点击事件；需检查浮动覆盖、margin-top塌陷、pointer-events拦截、动态绑定失效及层叠上下文干扰。
label 被遮挡不是语义问题，而是层叠上下文或布局塌陷导致的物理覆盖——它根本收不到点击事件，连 hover 都不触发。
检查 label 是否被浮动元素意外覆盖
常见于 Bootstrap 或老式表单：输入框旁加了 float: right 的按钮，下方紧邻一个带 margin-top 的 div。这个 margin-top 不会“推开”上方容器，反而让它的渲染边界上移，直接压住 label 的底部区域。
- 临时验证：给疑似遮挡的兄弟元素加
outline: 2px solid red，看是否高亮框盖住了label - 根本解法：移除所有
float，把label和关联控件（如input、button）包进display: flex容器 - 若必须保留浮动，需在
label父级加overflow: hidden或::after { clear: both }防止塌陷
确认 label 是否因 pointer-events 被静默拦截
哪怕 DOM 结构和 CSS 尺寸都对，以下三个样式会让 label 在 iOS Safari 或 Android WebView 中完全失活：
-
touch-action: none—— 禁用浏览器默认点击穿透，label无法把事件“嫁接”到input -
user-select: none—— 某些 Android WebView 会连带抑制 click 冒泡；应只设-webkit-user-select: none和-moz-user-select: none，保留标准属性为text -
label或其任意父级设置了pointer-events: none，或因z-index错乱被其他层遮挡
动态渲染时 label 绑定失效无报错
React/Vue 项目中，label 渲染早于 input 插入 DOM，或 JS 动态生成的 input 没同步生成对应 id，都会导致绑定失败。浏览器只在初始解析时建立 for 关联，后续插入不会自动补。
立即学习“前端免费学习笔记（深入）”；
- 排查要点：打开开发者工具，检查
label[for]的值是否与目标input#id**完全一致**（大小写敏感、无空格、不带#） - 被关联的
input不能是display: none或visibility: hidden；可用position: absolute; opacity: 0移出视口，但必须确保 DOM 存在且未被父级overflow: hidden切掉 - 若用
label包裹input，务必保证input是label的**直接子节点**，中间不能插div、span等容器
最容易被忽略的是：即使你写了 label[for="x"] 且 input#x 存在，只要父容器有 transform、opacity: 0.99 或 filter，就可能意外创建新层叠上下文，让 label 的点击事件无法正确冒泡到目标 input。
