表单元素重叠的根本原因是定位上下文设置错误，即多个absolute元素（如label或提示框）因父容器未设position: relative而共享同一锚点，导致坐标叠加；同时需规避windowed元素（如select）、表格单元格z-index失效及inline基线对齐问题。
为什么表单元素会重叠？定位上下文没设对
表单元素重叠，90%不是 CSS 写错了，而是 position: absolute 的 label 或提示框找不到正确的定位锚点。比如多个 <label> 都用了 top: 8px; left: 16px，但它们的父容器没设 position: relative，结果全被浏览器塞到同一个坐标上——尤其是双列布局（如 First Name / Last Name 并排）时，第二个 label 直接盖在第一个上面。
关键点在于：CSS 中 position: absolute 的定位基准是「最近的已定位祖先」。如果所有 label 都挂在同一个 .itemForm 下，而这个容器虽有 position: relative，但它内部两个子 <div> 是 static 的，那 label 就都以 .itemForm 为参考，必然重叠。
- 必须为每个 input + label 的直接包裹
<div>设置position: relative - 不要只给最外层容器设
position: relative，它管不住内部并排项 - 检查 DevTools 中 label 的 computed
position和offsetParent，确认它是否真锚定在预期父级上
select、textarea 等“窗口元素”总盖在其他层上面
原生 <select>、旧版 <iframe>、某些插件容器属于「有窗口元素（windowed element）」，操作系统强制它们渲染在最顶层，z-index 完全无效。这不是 bug，是浏览器底层合成机制决定的。
典型现象：下拉菜单弹出后，被 <select> 盖住；或者 tooltip 浮在 input 上方，却被旁边的 <select> 切掉一半。
立即学习“前端免费学习笔记（深入）”；
- 无法用
z-index压制<select>，哪怕设成 999999 也没用 - 临时解法：把
<select>替换为自定义下拉（用<div>+position: absolute实现） - 若必须保留原生
<select>，可尝试将干扰它的浮层（如 tooltip）移到document.body下，脱离当前 DOM 层级约束 - 移动端 Safari 对
<select>的遮罩行为更激进，务必真机测试
表格内表单控件层级混乱的根本原因
<table>、<tr>、<td> 这些元素默认不创建层叠上下文，z-index 加在它们身上等于没写。你给 <td> 设了 position: relative; z-index: 100，DevTools 里看到的 z-index 仍是 auto，因为 display: table-cell 被规范明确排除在 stacking context 创建者之外。
想让某个输入框“浮起来”，不能靠改 <td>，得绕过表格结构本身。
- 给目标
<td>加position: relative，再把需要高亮的元素（如 icon、badge）用<div>包裹，设position: absolute; z-index: 10 - 避免在
<table>或其父容器上用transform、opacity: 0.99、filter—— 这些会意外创建新层叠上下文，把整个表格锁死在一个“层级房间”里 - 复杂交互场景（如可编辑表格带悬浮操作栏），建议用
display: grid或display: flex模拟表格布局，所有子项天然支持z-index
label 和 input 垂直对齐错位其实是基线问题
看起来像重叠，其实是视觉错位：<label> 默认是 inline，<input type="text"> 是 inline-block，它们的 baseline（基线）对齐方式不同。字体大小、行高、padding 微小差异都会导致 label 悬在 input 上方或下沉，造成“挤在一起”的假重叠感。
这不是定位问题，是 inline 元素固有行为。强行用 vertical-align: middle 可能治标不治本。
- 统一用
display: flex包裹 label + input，并设align-items: center - 或把 label 设为
display: block，再用margin-bottom控制间距，彻底脱离 inline 流 - 避免混用不同 display 类型的表单元素（比如 label + textarea + select 放在同一 flex 行里），它们 baseline 规则不一致
- 检查是否无意中继承了全局
line-height，尤其来自 reset.css 或框架默认样式
