label标签默认static定位，z-index无效；需先设position: relative等非static值才生效，且须注意父容器层叠上下文影响。
label 标签本身不支持 z-index
直接给 <label></label> 设置 z-index 没有效果，因为 z-index 只对「定位元素」生效（即 position 值为 relative、absolute、fixed 或 sticky）。默认情况下 <label></label> 是 static 定位，z-index 被忽略。
常见错误现象：
— 写了 z-index: 10 但 label 仍被遮挡
— 开发者以为加了 z-index 就能“提层”，结果毫无反应
- 必须先加
position: relative（最常用，不影响文档流）或其它非static值 - 若 label 包含子元素（如图标、输入框），注意子元素的层级是否覆盖了 label 自身的背景/文字
- 避免滥用
position: absolute— 它会让 label 脱离流，可能破坏表单可访问性（如屏幕阅读器聚焦逻辑）
让 label 盖住 input 的常见场景与写法
典型需求：自定义 checkbox/radio 的外观时，用 label 覆盖原生 <input type="checkbox"> 并隐藏它，再通过 label::before/::after 绘制样式。这时 label 必须在 input 上层。
- HTML 结构建议保持
<input>在前、<label></label>在后，或用for属性绑定，确保语义正确 - CSS 中给
label加position: relative+z-index: 2，同时给input加position: absolute+z-index: 1（或直接opacity: 0/clip: rect(0 0 0 0)隐藏） - 不要只依赖
z-index数值大小 — 父容器的 stacking context 才是关键。如果 label 和 input 的父容器有transform、opacity 、<code>will-change等属性，会创建新层叠上下文，导致子元素的z-index在其内部比较，而非全局
调试 z-index 失效的三个检查点
当 label 明明设了 position 和 z-index 却还是被压住，优先查这三项：
- 父元素是否意外创建了 stacking context？用浏览器开发者工具的「Layers」面板或勾选「Paint flashing」观察层叠边界
- label 和遮挡它的元素是否属于同一个 stacking context？如果不是，它们的
z-index不可比 — 此时要提升 label 的祖先容器层级，而非 label 本身 - 是否存在 CSS 优先级覆盖？比如某个重置样式表里写了
label { position: static !important; }，会直接废掉你的定位设置
替代方案：不用 z-index 也能控制显示顺序
很多时候，问题本质不是“怎么提层”，而是“怎么让视觉元素按预期排列”。比起硬调 z-index，更稳定的做法是：
- 利用 DOM 顺序：同级元素中，后出现的默认在上层（前提是都没定位或都
static） - 用
transform: translateZ(0)强制创建独立层 — 但仅限必要时，过度使用会增加合成层、影响滚动性能 - 对 input 使用
appearance: none+ 完全用 label 承担交互和样式，避免两者重叠带来的层叠纠缠
真正难的不是写对 z-index，而是判断该在哪一级（label 自身？父 div？表单容器？）去干预 stacking context — 这个决策点容易被跳过，结果反复调数值却无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
