浮动标签核心是状态切换时位置不打架：label用transform绝对定位避免占位残留，仅对transform/opacity做transition防卡顿，:focus-within降级为JS监听focus/blur及input事件，并隐藏获焦placeholder以避免视觉冲突。
label怎么不遮挡input内容又保持可点击
浮动标签的核心不是“动起来”，而是“状态切换时位置不打架”。常见错误是把 label 直接盖在 input 上，结果用户点 label 没反应，或者输入文字被 label 半遮住。
正确做法是用 position: relative 包裹整个表单组，label 绝对定位到左上角，初始 top 和 font-size 都偏小；input 本身留出足够内边距（比如 padding-top: 1.2em），给 label 浮起后腾出空间。
- label 必须和 input 关联：用
for="id"+id，或把 input 套进 label 里（后者更可靠） - 不要用
z-index强行压层级——多数遮挡问题源于没设transform: translateY()而是只调top，导致占位残留 - focus/valid 状态下 label 应缩放+上移，但
transform不影响文档流，比top更干净
transition动画卡顿或闪一下怎么办
卡顿通常来自浏览器反复重排（reflow）。浮动标签若依赖 top、left 或 font-size 做过渡，每次变化都会触发 layout，尤其在移动端明显。
解法很简单：只对 transform 和 opacity 做 transition。这两者由合成器处理，不触发布局计算。
立即学习“前端免费学习笔记（深入）”；
- 写成
transition: transform 0.2s ease, opacity 0.2s ease，别加all - label 初始状态加
transform: translateY(-1.4em) scale(0.85)，聚焦后改成transform: translateY(-1.8em) scale(1) - 如果用了
opacity，记得 label 默认不透明（opacity: 1），否则 placeholder 文字可能被误认为不可见
:focus-within兼容性差怎么兜底
:focus-within 是实现“input 获焦 → label 上浮”的最简方式，但它在 IE 完全不支持，iOS Safari 15.4 之前也有 bug（比如输入法弹出时不触发）。
不能只靠伪类。真实项目里得补 JS 监听 focus/blur，并手动切 class：
input.addEventListener('focus', () => label.classList.add('active'));
input.addEventListener('blur', () => {
if (!input.value.trim()) label.classList.remove('active');
});
- CSS 里用
.form-group.active label覆盖默认状态，优先级要高于:focus-within规则 - 别忘了监听
input事件判断非空——用户粘贴内容后 label 也得浮起，不能只等 focus - IE11 下
classList可用，但focus-within必须降级为 JS 全包，别试图用 polyfill
placeholder和浮动label视觉打架
当 input 有 placeholder 且 label 还没浮起时，两者文字常重叠，尤其字体大小/颜色接近时，用户分不清哪是提示、哪是可编辑内容。
根本解决思路是“placeholder 只在未聚焦且为空时显示”，而不是让它一直竞争视觉权重。
- 给
input:focus::placeholder加color: transparent或opacity: 0，让获焦后 placeholder 消失 - label 浮起后，用
input:not(:placeholder-shown) + label或 JS class 控制其显隐，避免“已输入但 label 还沉底” - 别用
placeholder替代 label——语义和无障碍都要求 label 存在，placeholder 只是辅助
