label上浮需绑定input（for/id或嵌套），设position: relative、transform: translatey(-整数px)、transition，配合:placeholder-shown/:focus/:valid控制状态，并处理z-index、pointer-events及padding-top。
input:focus 时 label 怎么用 transform translateY 上移
必须把 label 和 input 绑定（用 for/id 或嵌套），否则 :focus 伪类无法影响到 label。浮动动画本质是：默认状态 label 压在 input 上方，获取焦点后向上平移 + 改变字号/颜色。
常见错误是直接对 label 写 transform: translateY(-20px) 却没设 position: relative —— 没定位上下文，transform 会作用于文档流外，导致文字“消失”或错位。
- label 必须加
position: relative - 动画需搭配
transition: transform 0.2s ease, font-size 0.2s ease（只写 transform 不够，字号也要过渡） - input 要有
padding-top，给上移后的 label 留出空间，否则文字会被遮挡
placeholder 消失后 label 浮动不跟手？检查 :valid 和 :placeholder-shown
纯靠 input:focus + label 只能解决聚焦时的上浮，但用户输入后失去焦点，label 还得保持上浮状态——否则一点击别处就掉回去，体验断裂。这时候不能只依赖 :focus。
现代方案是组合使用 :placeholder-shown（placeholder 显示时）和 :valid（有输入且通过 required 校验时）。注意：:valid 在空值时为 false，但 placeholder 存在时 :placeholder-shown 为 true，两者配合才能覆盖“有输入”和“空但聚焦”两种上浮场景。
- label 上浮条件建议写成：
input:not(:placeholder-shown) + label, input:focus + label - 如果 input 有
required属性，:valid更可靠；没 required 就只能靠:placeholder-shown判断是否为空 - Safari 对
:placeholder-shown支持较晚（iOS 15.4+），老版本需降级 fallback
transform translateY 导致文字模糊？别忽略 will-change 和 subpixel 渲染
用 transform: translateY(-16px) 后，label 文字边缘发虚、锯齿感强，大概率是浏览器把元素提升为独立图层时用了亚像素渲染，而 translateY 值不是整数（比如 -16.5px）会触发模糊。
- 确保 translateY 值为整数，如
transform: translateY(-16px)，避免小数 - 可加
will-change: transform提前告知浏览器要动画，减少重绘抖动（但别滥用，每个 label 都加会增加内存开销） - 若仍模糊，尝试强制开启 GPU 渲染：
transform: translateY(-16px) translateZ(0) - 字体抗锯齿在 Chrome/Firefox 下默认 ok，但 Safari 对 transform 中的 text-rendering 控制较弱，必要时加
-webkit-font-smoothing: antialiased
label 浮动后遮挡 input 边框或光标？z-index 和 pointer-events 得配齐
label 上浮后盖住了 input 的 top border 或光标位置，点不到输入框顶部区域——这不是 transform 的问题，而是层叠上下文没理清。
- input 必须有
position: relative且z-index: 2，label 设z-index: 1，确保 input 始终在上层可交互 - label 加
pointer-events: none，避免挡住 input 的点击穿透（尤其 label 宽度大于 input 时） - input 的
padding-top要 ≥ label 上移距离 + 字号变化量，否则文字输入时顶到 label 底边
浮动提示文字看着简单，真正稳的实现得同时掐住 DOM 结构、伪类时机、图层合成和交互穿透这四个点。少一个，用户就可能点不进去、看不清字、或者输一半 label 突然掉下来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
