核心矛盾是提示需紧贴输入框且不被overflow截断、不随滚动偏移、不干扰其他字段；解法为input直接父容器设relative、提示用absolute+calc(100%+4px)+width:100%+opacity过渡，peer要求同父同级且提示紧跟input后。
复杂表单校验提示布局的核心矛盾不是“怎么写CSS”，而是「提示必须紧贴目标输入框，又不能被父级 overflow 截断、不随滚动偏移、不干扰其他字段」——Tailwind 本身不提供开箱即用的提示定位方案，得靠 position + z-index + transition 的组合拳稳住。
为什么 peer 在嵌套结构里总失效？
Peer 选择器只认直接兄弟节点：input 和提示元素必须同级、且提示在 input 后面。常见破防场景：
- 把提示塞进
<label>或<span>里 —— 它们和 input 不是兄弟，peer-invalid彻底不触发 - 用了
form-control类封装（比如自定义 React 组件），实际 DOM 是<div><input></div><div class="error">...</div>—— 中间隔了 div，peer 断链 - input 被包裹在
flex或grid容器里，但提示元素放在容器外 —— 不同父级，peer 失效
解法只有一条：手动拉平结构。哪怕多套一层 <div class="relative">，也要保证 input 和提示共用一个父容器，且提示紧跟 input 后：
<div class="relative"> <input type="email" required class="peer w-full border px-3 py-2"> <p class="mt-1 text-sm text-red-600 opacity-0 peer-invalid:opacity-100 transition-opacity">邮箱格式不正确</p> </div>
absolute 提示总飘到左上角或页面底部？
这是因为没给最近的祖先设 position: relative，absolute 元素只能往上一直找，最终相对于 body 定位。更隐蔽的问题是：某些 UI 库或组件（如 Ant Design 的 Form.Item）内部已设了 position: relative，但它的 overflow: hidden 把你的提示截掉了。
立即学习“前端免费学习笔记（深入）”；
- 始终给 input 的**直接父容器**加
relative，别偷懒设在form或全局 wrapper 上 - 检查该父容器是否带
overflow: hidden或clip-path—— 这类属性会裁剪 absolute 子元素，删掉或改用overflow: visible - 定位用
top: 100%不够稳，浏览器对 input 高度计算有差异；改用top: calc(100% + 4px)（4px 是常见间距）更可控 - 若提示需右对齐，别只靠
right: 0—— 加width: 100%，否则长文本会撑破父容器
错误提示闪动、跳动或留白塌陷？
用 display: none 切换显隐是最大陷阱：元素瞬间脱离文档流，上方内容下坠，用户看到输入框“突然上移”。而 visibility: hidden 虽保留空间，但无法做淡入动画。
- 统一用
opacity: 0+pointer-events: none隐藏，配合transition: opacity 0.2s - 确保提示元素始终在 DOM 中（别用框架的条件渲染销毁它），否则每次验证都要重排
- 给提示元素设
min-height: 1.2em，防止文字消失后父容器高度抖动 - 避免在提示上用
height: auto—— 动画失效的元凶之一；改用max-height: 10rem+overflow: hidden实现展开收起
真正卡住人的从来不是某一行代码，而是 relative 锚点漏设、overflow 隐形截断、或者 peer 结构被框架悄悄打散 —— 这些地方没法靠工具自动检测，得盯着 DevTools 的 computed styles 一层层往上翻父级样式。
