本文讲解如何通过为每个输入项的容器添加 position: relative，使绝对定位的 label 正确锚定在对应 input 上，避免相邻 label 因共享同一父级定位上下文而发生重叠。
本文讲解如何通过为每个输入项的容器添加 position: relative，使绝对定位的 label 正确锚定在对应 input 上，避免相邻 label 因共享同一父级定位上下文而发生重叠。
在构建现代表单时，常采用「浮动标签（floating label）」设计：label 初始位于 input 内部上方，聚焦后上移并缩小，以节省空间并提升可读性。但当多个 input 并排（如「First Name」与「Last Name」）且共用同一父容器（.itemForm）时，若所有 label 均使用 position: absolute 但其定位参考父级（.itemForm）未设置 position: relative，浏览器会将它们全部相对于最近的已定位祖先元素（可能是 .itemForm 或更高层）进行定位——导致多个 label 叠加在同一坐标（如 top: 8px; left: 16px）上，视觉重叠。
根本原因在于：CSS 中 position: absolute 的定位基准是最近的、具有 position: relative/absolute/fixed/sticky 的祖先元素。当前 .itemForm 虽有 position: relative，但它同时包裹了两个
子项（分别含 First Name 和 Last Name），而两个
