应给input加position: relative和足够z-index；检查父容器overflow、transform等触发新层叠上下文的因素；定位元素与input需同层叠上下文，推荐用relative容器包裹并内部协调z-index。
定位元素遮挡 <input> 输入框怎么办
直接原因是 position: absolute 或 position: fixed 元素的 z-index 过高，或未设置 z-index 导致层叠顺序错乱，输入框被盖住、无法聚焦、光标不显示。
- 检查该定位元素是否父容器设置了
overflow: hidden，导致子元素裁剪后“看似消失”，实则仍占据空间并拦截点击 - 确认
<input>所在表单区域是否有transform、opacity 或 <code>filter，这些会触发新层叠上下文，使z-index失效 - 给
<input>显式加position: relative和足够大的z-index（如z-index: 2），比定位元素至少高 1 级
z-index 不生效的常见原因
不是所有元素都能用 z-index 控制层级 —— 它只对「已定位元素」（即 position 为 relative、absolute、fixed 或 sticky）有效。普通 <input> 默认是 static，z-index 直接被忽略。
- 必须给
<input>加position: relative（或其他非static值）才能启用z-index - 如果定位元素和输入框不在同一个层叠上下文中（比如父级用了
transform），它们的z-index互不比较，需统一提升父容器层级 - 避免用超大数字（如
z-index: 999999），容易引发后续维护冲突；推荐按模块分层（如表单控件：10，浮层：20，提示框：30）
用 outline 和 box-shadow 快速验证焦点是否被拦截
当点击输入框没反应、光标不出现时，先排除是否只是视觉上被盖住，实际焦点已获取。用开发者工具临时加样式快速验证：
input:focus {
outline: 2px solid red !important;
box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.3) !important;
}
- 如果红色轮廓出现，说明焦点正常，问题在视觉遮挡或光标颜色（检查
caret-color） - 如果轮廓完全不出现，说明点击事件被上层元素捕获，用
pointer-events: none临时禁用可疑定位元素的交互 - 注意：不要长期依赖
!important，仅用于排查；正式代码中应通过合理层叠结构解决
表单内绝对定位元素的推荐写法
很多下拉选择器、日期面板、错误提示都用 position: absolute，但嵌在表单里极易出问题。核心原则是：让定位元素和输入框共享同一层叠上下文起点。
立即学习“前端免费学习笔记（深入）”；
- 把定位元素和
<input>放进同一个position: relative的包裹容器中 - 定位元素设
position: absolute，用top/left相对于该容器定位，而非整个页面 - 容器本身不设
z-index，由内部元素用z-index协调层级（如输入框z-index: 1，下拉面板z-index: 2）
这种结构既可控又不易受外部样式干扰，是多数 UI 库（如 Ant Design、Element Plus）采用的基础模式。
