纯 CSS 即可实现 focus 时 label 上浮，需用 input:focus + label 或 :focus-within，label 必须位于 input 同级或之后；动画失效多因 transform/top 值不可动画化或 display 切换；遮挡问题需调整 z-index 和层叠上下文；placeholder 可通过 input:focus::placeholder { color: transparent } 隐藏。
focus 时 label 上浮需要依赖 :focus-within 或 JavaScript 吗
不需要。纯 CSS 就能实现，但必须用 :focus 配合父容器（如 div 包裹 input 和 label），且 label 必须在 DOM 中位于 input 同级或之后（推荐后置），才能用 + 或 ~ 选择器联动。用 :focus-within 更稳妥，兼容性稍差（IE 不支持），但语义更清晰、容错更强。
-
:focus-within作用于父容器，只要子元素获得焦点就触发，适合嵌套结构 - 如果只用
input:focus + label，label必须紧跟在input后面，不能隔标签 - IE11 及以下不支持
:focus-within，需降级为 JS 监听focus/blur
transition 动画卡顿或不触发的常见原因
上浮动画失效，90% 是因为 transform 或 top 的起始/结束值不可动画化，或者被其他样式覆盖。CSS 过渡只对可计算、可插值的属性生效，且要求前后状态都有明确值。
- 别用
display: none → block做上浮——display不可过渡 - 确保
label初始是position: relative或absolute，否则top/transform无效 - 用
transform: translateY(-1.2em)比top: -1.2em性能更好，也避免布局重排 - 过渡必须写在
label的默认状态里，不是只写在:focus下；例如：label { transition: transform 0.2s ease; }
label 上浮后遮挡输入框内容怎么办
这是 z-index 和层叠上下文导致的典型问题。上浮的 label 默认和 input 处于同一层叠上下文，一旦 transform 或 position 触发新层叠上下文，就可能盖住输入框光标或文字。
- 给
input显式加position: relative和z-index: 2 - 给
label加z-index: 1（前提是它已有position: relative或absolute） - 避免对
label使用opacity: 0.99等触发层叠上下文的操作 - 检查是否有父容器设置了
overflow: hidden，裁剪了上浮后的label
如何让 placeholder 文字在 label 上浮后自动消失
CSS 本身无法监听 label 状态来控制 ::placeholder，但可以利用 input:focus 联动隐藏它——这比 JS 更轻量，也符合“纯 CSS 实现”的初衷。
立即学习“前端免费学习笔记（深入）”；
- 写成：
input:focus::placeholder { color: transparent; } - 注意：部分浏览器（如 Safari）对
::placeholder的透明支持不稳定，可改用opacity: 0 - 不要试图用
label的状态去控制placeholder，CSS 选择器无法跨元素影响伪元素 - 如果用了 JS 控制上浮，顺便
input.addEventListener('focus', () => input.placeholder = '')也行，但得记得 blur 时恢复
真正难的不是让 label 动起来，而是让上浮位置精准适配不同字体大小、行高、padding 组合；每次换设计稿，transform 的偏移量几乎都要重新调一次。
