如何用CSS让表单错误提示信息不挤乱整体布局？

布局跳动主因是 display: none 切换导致元素退出文档流；应改用 opacity+pointer-events 控制显隐，配合 min-height、position: relative 锚点、width: 100% 及换行控制来稳住位置。

错误提示用 display: none 切换，是布局跳动的最常见原因。它会让提示元素彻底退出文档流，上层 input 瞬间上移，看起来像被“顶”起来。

用 opacity + pointer-events 控制显隐

保留 DOM 节点、不破坏流式布局，是稳住位置的前提。

1. 初始状态设 opacity: 0; pointer-events: none;，而不是 display: none
2. 配合 transition: opacity 0.2s 实现淡入淡出，视觉更自然
3. 必须确保提示元素始终在 DOM 中——别用框架的 v-if 或 *ngIf 销毁重建
4. 加 min-height: 1.2em 到提示容器上，防止文字消失后父容器高度塌缩抖动

父容器必须设 position: relative

这是绝对定位生效的锚点，不是可选项。错位八成是因为提示元素没找到最近的已定位祖先，一路飘到 body 上去了。

1. 给 input 的直接父容器（比如 div.form-item）加 position: relative
2. 别给整个 form 或 body 加，否则所有提示都挤在左上角
3. 如果表单项是 Flex 布局，确认 align-items 没设成 center 或 stretch，它们会干扰 top: 100% 的计算

width 和换行要主动约束

默认 position: absolute 元素宽度只包内容，窄容器里长提示会溢出或折行混乱，进而撑开父级、影响布局。

1. 提示元素加 width: 100%，但前提是父容器是 display: block 且有明确宽度
2. 加 white-space: normal; word-break: break-word; 防止英文/数字撑破容器
3. 避免父容器设 overflow: hidden，否则提示可能被截断
4. 移动端键盘弹起时，部分浏览器会重算视口，此时仅靠 CSS 不够，需 JS 监听 focus 临时切为 position: fixed

真正难的不是写对那几行 CSS，而是记住：relative 是锚点，absolute 是箭头，opacity 是开关，z-index 是层级，四者缺一不可；而任何一处用了 display: none 或漏了 relative，整个提示就会立刻脱靶。