需将label与input同级并置于relative容器内，label设absolute+top:-24px且前置DOM，禁用input的z-index；移动端键盘弹出时须JS切换fixed定位并动态计算位置。
用 :invalid 配合 label 绝对定位实现错误提示上浮
不能只靠 :invalid 自动显示提示语，它本身不生成内容，只是状态标记；真正让提示“浮起来”的关键是把 label 拉到输入框上方并控制显隐逻辑。
常见错误是直接给 input:invalid + label 加 position: absolute，结果 label 脱离文档流后位置飘移、遮挡其他元素，或者根本没出现在输入框正上方。
- 必须把
label和input包在同一个相对定位的容器里（比如<div class="field">），再对label绝对定位 -
label要设top: -24px这类固定偏移，不能依赖transform: translateY(-100%)，否则焦点进入时会闪一下 - 提示语文字得写在
label里（不是用::after伪元素生成），否则屏幕阅读器可能读不到
label 上浮后和 input:focus 的层级冲突怎么解
当用户点击输入框，input:focus 触发高亮边框，但浮动的 label 往往被盖在下面——这不是 z-index 没设好，而是浏览器默认把聚焦态的表单控件渲染在顶层。
解决方式很具体：不靠 z-index 硬顶，而是让 label 和 input 共享同一层叠上下文，并确保 label 在 input 渲染之前出现在 DOM 中（即 label 写在 input 前面）。
立即学习“前端免费学习笔记（深入）”；
-
label必须放在input标签之前，且两者同级，不能嵌套 - 包裹容器设
position: relative，label设position: absolute; top: -24px; left: 0;，input保持position: static - 不要给
input设z-index，否则可能意外创建新层叠上下文，打断label的定位参照
为什么不用 :placeholder-shown 或 JavaScript 校验来替代
:invalid 的优势是零 JS、纯 CSS 响应原生校验（required、type="email" 等），但它的触发有延迟：只有用户交互后（blur 或 submit）才生效，刚打开页面时不会高亮空必填项。
如果需要“一进页面就标红空字段”，就得补 JS 监听 DOMContentLoaded 后手动加 class="invalid"，或者改用 :user-invalid（Chrome 102+ 支持，但 Safari 还没跟上）。
-
:invalid是“提交前校验失败”状态，:user-invalid是“用户操作后校验失败”，行为更接近预期 -
:placeholder-shown只能判断 placeholder 是否可见，无法区分“值为空但合法”和“值为空且非法” - 纯 CSS 方案无法做自定义规则校验（比如密码强度、两次输入一致），这类必须交由 JS 控制
setCustomValidity()
移动端键盘弹起时浮动提示被顶出视口怎么办
iOS Safari 和部分安卓 WebView 在软键盘弹出时会重算 viewport 高度，导致绝对定位的 label 被挤出可视区——不是定位错了，是整个页面被“推高”了。
没有通用 CSS 解法，只能妥协处理：检测键盘弹起时机，临时把 label 切换为 position: fixed 并用 JS 计算真实位置。
- 监听
focus事件，在input获焦时给父容器加class="keyboard-active" - CSS 里写
.keyboard-active label { position: fixed; }，再用 JS 把getBoundingClientRect()的top值转成top样式 - 别依赖
window.innerHeight，iOS 键盘收起时该值不会立刻恢复，要用resize事件配合防抖
这事没法完全交给 CSS，硬要纯样式的话，唯一稳妥做法是放弃上浮，改用输入框下方常驻提示，或者只在桌面端启用上浮逻辑。
