纯css即可实现浮动标签，关键用:focus和:placeholder-shown控制状态，label必须紧邻input后并用+选择器联动，配合transform translatey上移及transition定义在label默认样式中。
纯 CSS 就能实现，关键不是写 :hover，而是用 :focus 和 :placeholder-shown 控制状态切换，配合相邻选择器和 transform 动画。
label 必须紧跟 input 且用 + 选择器联动
DOM 顺序直接影响 CSS 是否生效。label 必须是 input 的**紧邻兄弟元素**（即 <input><label></label>），否则 input:focus + label 不会触发。
- ✅ 正确结构：
<input id="name" placeholder=" "><label for="name">姓名</label> - ❌ 错误结构：中间插入
<span></span>或 label 在 input 前面，+选择器完全失效 - ⚠️ 注意：
for和id必须严格匹配，否则可访问性受损，且部分屏幕阅读器无法关联
transition 必须写在 label 默认样式里
动画不生效，90% 是因为把 transition 只写在 input:focus + label 中——CSS 过渡必须定义在“起始状态”，浏览器才能插值计算。
- ✅ 正确写法：
label { transition: transform 0.2s ease, font-size 0.2s ease; } - ✅ 上浮推荐用
transform: translateY(-1.2em)，比top性能更好，不触发重排 - ❌ 避免
display: none → block，display 不可过渡；也别用opacity: 0 → 1模拟显隐，它不解决定位问题
聚焦时 placeholder 消失要靠 input:focus::placeholder
CSS 无法根据 label 状态反向控制 input 的伪元素，但可以借 input 自身焦点状态隐藏占位符，避免文字和上浮 label 重叠。
- ✅ 推荐写法：
input:focus::placeholder { color: transparent; } - ⚠️ Safari 对
::placeholder的color: transparent支持不稳定，备用方案：opacity: 0 - ❌ 不要用
input:not(:placeholder-shown) + label来触发上浮再顺手改 placeholder——这属于副作用误用，逻辑耦合且难维护
z-index 和层叠上下文容易导致 label 盖住光标
label 上浮后挡住输入框内容或光标，不是位置错了，而是层叠顺序出问题。transform 或 position:absolute 会创建新层叠上下文，打乱默认渲染顺序。
- ✅ 给 input 加
position: relative; z-index: 2; - ✅ 给 label 加
position: absolute; z-index: 1;（前提是它已有position） - ⚠️ 检查父容器是否设了
overflow: hidden，会裁剪上浮后的 label 区域 - ⚠️ 避免对 label 使用
opacity: 0.99或will-change，这些都会意外触发新层叠上下文
最易被忽略的是 pointer-events：label 覆盖 input 会导致点击无响应，必须加 pointer-events: none 让鼠标穿透到 input；但 label 内文字仍需可选中，所以不能整个 label 都禁用，得靠结构微调或额外包裹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
