必须给每个 label 的直接父容器（如 .field）设置 position: relative，否则所有 absolute 定位的 label 会共享同一祖先坐标系而重叠；动画问题本质是定位上下文缺失，非动画本身故障。
这问题和“动画”无关，是 CSS 定位理解偏差导致的视觉重叠。浮动标签（floating label）本身不依赖动画库，重叠根源在 position: absolute 缺失正确的定位上下文。
为什么多个 label 会堆在同一个位置
当多个 <label></label> 都设了 position: absolute，但它们的共同父容器（比如 .form-row）没设 position: relative，浏览器就会把它们全部往上找——直到找到最近的已定位祖先（可能是 body 或某个外层 div）。结果就是所有 label 都按同一套 top/left 坐标渲染，自然叠在一起。
围绕关键发现、作用机制、临床相关性及研究局限性展开讨论。适用于撰写或优化任何生物医学论文的“讨论（Discussion）”部分——包括结果解读、与既往文献关联、阐释意外发现、界定研究局限性，以及撰写结论。当用户输入以下任一指令时也会自动触发该功能： - “write my discussion” - “help me discuss my findings” - “how do I compare to prior studies” - “write the limitations par
- 不是动画帧没更新，也不是 transition 写错了
- 不是 JavaScript 没触发重绘，而是 CSS 根本没让每个 label “认自己的爹”
- 哪怕加了
transform: translateY(-10px)，也只会让一堆 label 一起上移，还是重叠
必须给每个 label 的直接父容器加 position: relative
每个输入项（<input> + <label></label>）应该包裹在一个独立容器里，比如 <div class="field">。这个 <code><div> 就是 label 的“锚点”，必须显式声明 <code>position: relative：
.field {
position: relative;
}
<p>.field label {
position: absolute;
top: 8px;
left: 12px;
transition: all 0.2s ease;
}</p><p>.field input:focus + label,
.field input:not(:placeholder-shown) + label {
top: -16px;
font-size: 12px;
}
</p>
- 不要只给最外层表单容器设
relative，那会让所有 label 共享一个坐标系 - 如果用了 Flex/Grid 布局，
position: relative依然要加在每个.field上，不能省 - 用 Chrome DevTools 检查：选中 label → Elements 面板里看 Computed →
position和offsetParent，确认 offsetParent 是你预期的那个<div> <h3>动画卡顿或错位时先关掉 transition 查问题</h3> <p>过渡动画会掩盖定位错误。调试阶段建议临时禁用：</p> <pre class="brush:php;toolbar:false;">.field label { /* transition: all 0.2s ease; ← 先注释掉 */ } </pre> <ul> <li>先确保每个 label 静态位置正确（聚焦前/后都各占各的位置）</li> <li>再打开 <code>transition，观察是否平滑移动 —— 如果静止时就重叠，动画再顺也没用 - 避免对
top+transform同时做动画，可能触发重排；优先用transform: translateY()替代top
真正容易被忽略的是：很多人以为“写个动画库就能修布局”，其实连 position: relative 都没加到对的 DOM 节点上，JS 动画再 fancy 也救不了。定位上下文错了，一切视觉表现都是空中楼阁。
