点击区域偏移本质是父容器高度塌陷导致盒模型失效，需用 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 等兄弟元素）的**紧邻父容器**上：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 推荐写法：.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 闪动区域——很多“修好了”的假象，就卡在这一步没做。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！