position: absolute使元素脱离文档流，导致下方元素上浮；需为父容器设position: relative提供定位上下文，并用visibility: hidden+height: 0+overflow: hidden隐藏提示以保留占位。
错误提示用 position: absolute 后，下方元素上浮是因为父容器没定位上下文
浮动的错误提示（比如 span.error）一旦设成 position: absolute，浏览器就会把它从文档流中抽走。如果它的父容器没设 position: relative，它就会上溯找最近的已定位祖先——常常是 body 或某个意外的外层 div，结果提示语飘到页面角落，而下方元素“趁虚而入”，顶替了本该留出的空间。
真正要锁住位置，得让提示语只相对于输入框容器偏移：
- 给每个输入框的直接包裹容器（例如
<div class="form-field">）加上position: relative - 错误提示元素必须是这个容器的子元素，且设
position: absolute、top: 100%或固定像素值（如top: 4px） - 避免给整个表单或大块区域统一加
position: relative，否则多个提示会互相干扰定位基准
用 visibility: hidden + height: 0 + overflow: hidden 隐藏提示，别用 display: none
display: none 会让提示语彻底退出布局流，父容器高度瞬间收缩，下方元素立刻上跳，光标可能闪动、自动填充弹窗错位——这不是 bug，是浏览器对流式布局的诚实响应。
保持空间占位才是稳住下方布局的关键：
立即学习“前端免费学习笔记（深入）”；
- 隐藏时用
visibility: hidden; height: 0; overflow: hidden;组合，保留盒模型尺寸 - 显示时只需切回
visibility: visible; height: auto;，不触发重排 - 如果必须用
display: none，至少加transition: opacity 0.15s ease缓解视觉突兀，但无法避免布局抖动
Flex 布局下 margin-top 失效？先查 align-items
在 display: flex 的表单行里，给错误提示加 margin-top: 8px 却没反应，大概率是容器设了 align-items: center 或 stretch，把所有子项垂直拉齐了，外边距被“吞掉”。
解决方式很具体：
- 把提示语设为
align-self: flex-start，让它脱离容器的垂直对齐约束 - 或者改用
gap: 8px控制行内间距（推荐），它作用于 flex 容器本身，不受align-items干扰 - 避免在 flex 子项上硬写
margin-top，尤其当提示语是absolute定位时，它已不在 flex 流中，margin无效
label 和 input 关联不牢，会导致提示语被读错或焦点错位
错误提示语是否出现在正确位置，表面看是 CSS 问题，深层常卡在语义结构上。如果 label 没和 input 正确关联，辅助技术可能把提示语绑定到错误字段，甚至导致点击提示文字时焦点没落到对应输入框。
实操必须做到：
- 每个
input有唯一id，对应label[for]；或直接用label包裹input和提示文字 - 错误提示元素加
role="alert"和aria-live="assertive"，确保变化被屏幕阅读器即时朗读 - 别把提示语塞进
label内部——它不属于标签语义，会打乱语音顺序，也影响 CSS 定位逻辑
最难验证的其实是坐标精度：修复后务必用 getBoundingClientRect() 打印提示语的实际 top 和 bottom，再开 DevTools 的 “Rendering → Paint flashing”，确认红色重绘区是否严丝合缝贴着输入框下沿。软键盘弹起、字体加载完成、页面缩放后，这些位置都可能悄悄偏移。
