点击区域偏移本质是父容器高度塌陷导致盒模型失效，需用 DevTools 检查 offsetHeight、outline 边框验证，并在紧邻父容器上清除浮动；z-index 生效需 position 非 static 且无新层叠上下文干扰；务必通过 getBoundingClientRect() 和 Paint flashing 确认修复效果。
点击区域偏移其实是父容器高度塌陷
输入框视觉位置正常但点不中，90% 是因为浮动让父容器 offsetHeight 变成 0 或极小值——你看到的只是“悬空渲染”，鼠标根本没落在它的盒模型内。用 DevTools 选中该 input，看右侧 Computed 面板里的 height 和 offsetHeight；再临时给父容器加 outline: 2px solid red，如果红色边框没包住输入框，就确认是塌陷。
清除浮动必须作用于直接父容器
别在 form 根元素或中间层加 clearfix，无效。必须精准加在包裹该 input（及其 label 等兄弟元素）的**紧邻父容器**上：
- 推荐写法：
.input-group::after { content: ""; display: table; clear: both; } - 现代替代：
.input-group { display: flow-root; }（Chrome 58+/Firefox 57+/Safari 10.1+ 支持，无副作用） - 避免
overflow: hidden：它可能裁掉:focus轮廓线、select下拉框或 autocomplete 弹层
z-index 生效的前提是已定位且未被锁死
直接给 input 写 z-index: 999 没用，因为默认 position: static，z-index 被忽略。但光加 position: relative 也不够：
- 必须同时设
position: relative和z-index（哪怕只是z-index: 2） - 检查祖先元素是否创建了新层叠上下文：如
opacity: 0.99、transform、will-change—— 一旦存在，子元素的z-index就被关在里面，再高也出不来 - 别让
pointer-events: none继承下来，尤其注意伪元素::before或::after是否覆盖了热区
验证点击是否真正落在元素上
修复后别只凭肉眼判断，要用工具确认事件落点是否对齐：
立即学习“前端免费学习笔记（深入）”；
- 控制台执行：
console.log(input.getBoundingClientRect())，比对返回的top/left是否与视觉位置一致 - DevTools → Rendering → 勾选 Paint flashing，点击时看红色闪动是否精准覆盖输入框
- 如果闪动偏移，说明仍有脱离文档流的干扰元素（比如意外加了
float的兄弟节点，或父容器被transform扭曲坐标系）
getBoundingClientRect() 返回值和 Paint flashing 闪动区域——很多“修好了”的假象，就卡在这一步没做。 
