当多个带浮动标签的输入框并排显示时，若父容器未设置定位上下文，绝对定位的 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 容器，其子元素（即两个
）默认为 static 定位。因此，所有 label 实际都相对于 .itemForm 的左上角定位（top: 8px; left: 16px），造成重叠。
✅ 正确解法：为每个 label 的直接父容器（即包裹 input 和 label 的
）显式声明 position: relative，使其成为独立的定位上下文：
.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 结构与语义，是解决浮动标签重叠问题的标准实践。
