错误提示定位不准、跳位等问题源于定位上下文缺失和显隐方式不当；需为每个输入框包裹容器设 position: relative，提示元素设 position: absolute 并用 top: 100% 贴底，避免 display: none 改用 visibility: hidden + height: 0，校验后动态重算位置确保稳定。
错误提示飘在输入框外面、遮不住、一显示就跳位——这些问题基本都出在定位上下文和显隐方式上，不是CSS写得不够炫，而是没踩对渲染机制的节奏。
给包裹容器加 position: relative
这是最常被跳过的一步。浏览器里 position: absolute 的提示元素，会向上查找第一个「已定位祖先」；如果表单外层只是普通 <div>，它就直接锚定到 <code>，位置自然错乱。
- 每个
<input>必须包在独立的容器里，比如<div class="field"> <li>给这个容器加 <code>position: relative，别加在<form></form>或大块<section></section>上 - 确保提示元素（如
<span class="error"></span>）是该容器的子元素，且position: absolute - 提示元素设
width: 100%，让它撑满父容器宽度（前提是父容器是display: block） - 加
white-space: normal和word-break: break-word，防长英文/数字撑破容器 -
z-index: 10足够，太高可能压住 toast 或 modal（它们通常用z-index: 1000） - 父容器千万别设
overflow: hidden，否则提示直接被截断 - 改用
visibility: hidden+height: 0+overflow: hidden组合，保留占位空间 - 若需动画，加
transition: opacity 0.2s，配合opacity: 0/opacity: 1 - 提示元素必须始终存在于 DOM 中，别用框架的
v-if或*ngIf销毁重建 - 设
min-height: 1.2em防止文字消失后父容器高度抖动 - submit 后批量显示提示，建议 JS 主动重新测量每个 input 的
getBoundingClientRect()，再动态设置 top 值 - 移动端键盘弹起时，页面视口变化剧烈，
position: absolute容易失位；必要时用 JS 切成position: fixed并手动修正坐标 -
:user-invalid比:invalid更适合真实交互，它只在用户操作后激活，避免空必填字段一进页面就闪现提示
用 top: 100% + left: 0 贴住输入框正下方
别用 top: calc(100% + 4px) 硬调像素值，除非你真需要微调间距。原生 top: 100% 是最稳的基准，它基于输入框的底边计算，不受 padding 或 border 影响。
隐藏提示别用 display: none
每次切 display: none，DOM 元素完全退出文档流，输入框会瞬间上移、光标跳动，Chrome 还可能触发自动填充重排——这不是 bug，是布局引擎的必然反应。
立即学习“前端免费学习笔记（深入）”；
校验时机影响定位稳定性
blur 时提示要立刻贴住输入框，但 submit 时批量校验可能触发窗口 resize 或滚动，这时靠 top: 100% 计算的位置就不可靠了——它不会自动重算。
真正难的不是让提示“浮起来”，而是让它浮得稳、藏得静、换得不惊动用户视线——这些细节全在定位上下文、显隐策略和校验节奏的咬合点上。
