可点击区域被盖住需先确认z-index是否生效：z-index仅对position非static的元素有效，常见错误是未设position；父容器可能创建独立堆叠上下文；遮挡常源于上层元素、伪元素或float布局；动态按钮须手动设position和zIndex；装饰性元素应加pointer-events: none；label失效多因touch-action: none或非直接子节点。
可点击区域被盖住？先确认是不是z-index没生效
z-index只对定位元素起作用，position: static（默认值）下写z-index: 999完全无效。常见错误是给button或a直接加z-index却不设position。
必须显式设置：position: relative（最安全）、absolute或fixed。别用position: absolute布局整页按钮——响应式易崩，且容易意外创建新堆叠上下文。
- 临时验证：在开发者工具中选中按钮，看「Computed」面板里
z-index是否显示为有效值（非auto），同时检查position是否已生效 - 注意父容器是否悄悄创建了独立堆叠上下文：比如
opacity: 0.99、transform: scale(1)、will-change: transform都会让子元素的z-index只在内部比较 - iOS Safari 对
transform: translateZ(0)极其敏感，哪怕只为硬件加速，也可能让按钮“突然浮到最上面”
按钮点不动但样式正常？大概率是上层元素物理遮挡
打开开发者工具，用「选择元素」工具悬停按钮，缓慢上移鼠标，观察高亮是否中途被另一个div、.col或伪元素接管。一旦发现接管，说明有真实遮挡。
-
float: right+margin-top组合极易引发覆盖：下方元素的渲染边界会向上延伸，直接压住浮动按钮右半区 - 动态创建的按钮（如
document.createElement("button")）默认position: static，此时z-index无效；必须手动设button.style.position = "relative"再配zIndex - 装饰性图片、
::before箭头等常抢事件路径——给它们加pointer-events: none，比堆z-index更干净、更可靠
label点击失效？iOS Safari 下的典型陷阱
iOS Safari 中点击label文字无反应，但点input本身可以，90% 是touch-action: none或父级z-index遮挡导致。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
-
touch-action: none会禁用整个触摸流，包括label隐式关联的点击转发，必须移除 -
label内input必须是**直接子节点**：<label><input></label>✅；<label>\n<input></label>❌（换行生成 text node，破坏关联） - Flex 容器中未设
align-items: center，可能导致input垂直偏移，部分区域脱离label热区
真机测试时最容易忽略的三个信号
桌面端表现正常 ≠ 移动端可用。以下现象不是“偶发”，而是热区已异常的明确信号：
- iOS Safari 中
label文字点击静默失效，但input可点——优先查touch-action和父级z-index - 两个按钮之间“缝隙”能触发跳转，尤其缩放后——检查是否用
padding模拟间距，而非margin，padding会扩大热区 - 点击区域明显超出视觉边界（比如左侧空出 30px 仍触发）——用开发者工具高亮热区，确认是否受
line-height、vertical-align: baseline影响
层级问题从来不是单个z-index能解决的，真正决定渲染顺序的是浏览器构建的堆叠上下文树。数值只是同一上下文内的排序依据——你得先找到那个悄悄当了“小 boss”的父容器。
