应给input的直接父容器设position: relative作为absolute提示的定位参照，并用calc(100% + 4px)替代top: 100%以规避高度计算误差，同时设置width: 100%、white-space: normal、z-index: 10及opacity过渡隐藏，确保提示稳定显示。
父容器没设 position: relative，提示就飘走
错误提示用 position: absolute 却不老实在 input 下方，根本不是 CSS 写错了，而是它压根没找到“参照物”。absolute 元素会向上查找最近的已定位祖先（即 position 值为 relative、absolute、fixed 或 sticky 的父级），找不到就一路跑到 body 甚至视口去定位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
input的直接父容器（比如<div class="form-item">）加 <code>position: relative，别偷懒只包一层空div或直接动form - 避免给
input自身设position: relative—— 它是替换元素，宽高行为不稳定，容易引发对齐偏差 - 调试时临时加
outline: 1px solid red到父容器，确认它的实际范围是否覆盖 input 和预期提示区域 - 统一在
input和提示元素上写box-sizing: border-box - 改用
top: calc(100% + 4px)（4px 是常见间距），比硬卡100%更可控 - 如果 input 有
border-radius，提示元素顶部也加border-top-left-radius和border-top-right-radius，视觉才连贯 - 给提示元素加
width: 100%，前提是父容器是display: block且有明确宽度 - 用
white-space: normal+word-break: break-word防止超长字符串撑破容器 - 设
z-index: 10（别用太小值），确保浮在 input 上方；若页面有 toast/modal，提示的z-index应低于它们（如 toast 用 1000，提示用 10） - 父容器别设
overflow: hidden—— 这会直接截断提示 - 优先用
opacity: 0+pointer-events: none隐藏，配合transition: opacity 0.2s做淡入淡出 - 确保提示元素始终在 DOM 中（别用
v-if或ngIf销毁重建），否则每次都要重排 - 给提示元素设
min-height: 1.2em，防止文字消失后父容器高度抖动 - JS 控制显隐时，同步更新
aria-live="assertive"和role="alert"，否则屏幕阅读器读不到变化
top: 100% 看似合理，但浏览器算得不准
top: 100% 意思是“从父容器顶部起，往下挪一整个父容器高度”，但它依赖父容器高度计算。而 input 在不同浏览器（尤其旧版 Safari）、不同 box-sizing、不同 line-height 下渲染高度常有 1–2px 差异，导致提示悬空或贴太紧。
实操建议：
立即学习“前端免费学习笔记（深入）”；
提示文字换行/溢出，不是位置错，是尺寸失控
绝对定位元素默认 width 是内容宽度（fit-content）。父容器窄、提示文字长（比如英文邮箱校验失败消息），就会溢出或折行混乱；再叠加 z-index 没设好，还可能被相邻 input 的 box-shadow 盖住。
实操建议：
立即学习“前端免费学习笔记（深入）”；
显示/隐藏用 display: none，布局会抽搐
每次验证失败加 display: none，成功后切回 block，会导致提示元素完全脱离文档流：输入框瞬间上移、光标跳动、甚至触发 Chrome 自动填充重排。这不是 bug，是流式布局的必然反应。
实操建议：
立即学习“前端免费学习笔记（深入）”；
absolute 真有参照、提示真能换行、显隐真不扰动布局。漏掉其中任意一环，用户看到的就是一个飘忽不定的红色小字。
