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