当多个带浮动标签的输入框并排显示时，若父容器未设置定位上下文，绝对定位的 label 会脱离文档流并相互覆盖；只需为每个 input + label 的直接父级 div 设置 position: relative，即可让其内部的 position: absolute 标签基于该 div 定位，彻底避免重叠。
当多个带浮动标签的输入框并排显示时，若父容器未设置定位上下文，绝对定位的 label 会脱离文档流并相互覆盖；只需为每个 input + label 的直接父级 div 设置 `position: relative`，即可让其内部的 `position: absolute` 标签基于该 div 定位，彻底避免重叠。
在构建现代表单（尤其是双列布局如「First Name / Last Name」）时，常采用「浮动标签（floating label）」设计：标签初始位于输入框顶部内侧，聚焦后上移留出空间。该效果通常依赖 position: absolute 实现，但若忽略定位上下文（containing block），多个标签将共享同一参考坐标系，导致视觉重叠——正如问题中「Last Name」标签覆盖「First Name」标签的现象。
根本原因在于：.itemform label 使用了 position: absolute，但其最近的非 Static 定位祖先元素是 .itemForm（设置了 position: relative），而 .itemForm 是一个 display: flex; flex-direction: row 容器，其子元素（即两个
✅ 正确解法：为每个 label 的直接父容器（即包裹 input 和 label 的
.itemForm > div { position: relative; }完整修复后的 CSS 如下（关键新增行已加注释）：
.lineForm { display: flex; flex-direction: column; } .itemForm { width: 100%; position: relative; margin-bottom: 10px; display: flex; flex-direction: row; justify-content: space-between; } /* ✅ 关键修复：为每个 input+label 的包装 div 创建独立定位上下文 */ .itemForm > div { position: relative; } .itemForm input, .itemForm select { width: 100%; padding: 26px 16px 10px 16px; background: #FFFFFF; border: 1px solid #E4E4E4; border-radius: 16px; font-size: 16px; color: #222222; } .itemForm label { font-size: 12px; color: #7B7B7B; position: absolute; top: 8px; left: 16px; pointer-events: none; /* 推荐添加：防止点击 label 时误触底层 input */ transition: all 0.2s ease; /* 可选：为聚焦动画做准备 */ }
HTML 结构保持不变，语义清晰且符合可访问性规范（
<div class="contentForm"> <div class="lineForm"> <div class="itemForm"> <div> <input id="firstname" name="Firstname" type="text" class="formInput" required=""> <label for="firstname">First name</label> <!-- 注意：for 值应与 input id 一致 --> </div> <div> <input id="lastname" name="Lastname" type="text" class="formInput" required=""> <label for="lastname">Last Name</label> </div> </div> <div class="itemForm"> <div> <!-- 同样需包裹，确保单个 input 也有相对定位上下文 --> <input id="tel" name="Telefone" value="(21) 00000-0000" type="tel" required=""> <label for="tel">Telefone</label> </div> </div> </div> </div>⚠️ 注意事项：
- for 属性值必须严格匹配对应 input 的 id，否则屏幕阅读器无法正确关联，影响无障碍体验；
- 建议为 label 添加 pointer-events: none，避免绝对定位后遮挡输入框点击区域；
- 若后续需实现「聚焦时标签上浮」动效，可在 input:focus + label 或 JavaScript 控制类名中扩展 transform: translateY(-16px) 等样式；
- 避免对 .itemForm 本身使用 position: absolute，否则会破坏 flex 布局流。
此方案轻量、兼容性强（支持所有现代浏览器），且不改变 HTML 结构与语义，是解决浮动标签重叠问题的标准实践。