输入框无法聚焦的根源是层叠上下文混乱与文档流断裂。需清除浮动、为input或其包装容器添加position: relative和z-index，并验证父容器是否创建了封闭层叠上下文。
输入框无法聚焦，不是input本身失焦，而是它被视觉遮挡或事件拦截——浮动只是导火索，真正卡住的是层叠上下文和文档流断裂。
为什么给input加z-index没用
直接给float元素写z-index无效，因为z-index只对已定位元素（position为relative、absolute、fixed或sticky）生效。浮动元素默认是position: static，z-index声明会被浏览器忽略。
- 错误写法：
.input-wrapper { float: left; z-index: 999; }→ 完全不生效 - 正确前提：必须先加
position: relative（哪怕不偏移），再设z-index - 更隐蔽的问题：如果
input父容器有opacity: 0.99、transform或will-change，会创建新层叠上下文，子元素的z-index就被锁死在内部，再高也没用
先确认是不是父容器塌陷导致点击区域消失
浮动让input脱离文档流，若父容器未清除浮动，高度可能坍缩为0。你看到的输入框只是“悬空渲染”，getBoundingClientRect()返回的height可能只有1px甚至0，鼠标点下去根本不在它的盒模型内。
- 用 DevTools 选中该
input，看右侧Computed面板中offsetHeight是否异常小 - 临时给父容器加
outline: 2px solid red，观察红色边框是否包裹住整个可交互区域；如果不包，说明塌陷仍在 - 别用
overflow: hidden强行“修复”——它可能裁掉:focus时的轮廓线或下拉菜单，掩盖真实问题
真正可靠的三步修复路径
不要靠单个属性蒙混过关。必须分清责任：恢复文档流、明确层级归属、验证事件落点。
- 清除浮动：给
input的直接父容器加class="clearfix"，CSS 写.clearfix::after { content: ""; display: table; clear: both; }——兼容性好、副作用最小 - 启用定位与层级：给
input自身或其**紧邻的包装容器**加position: relative+ 合理z-index（如2），确保它高于浮动兄弟元素（后者默认z-index: auto） - 验证落点：用
console.log(input.getBoundingClientRect())打印坐标，配合 DevTools 的Rendering → Paint flashing确认点击时是否真触发了该元素的重绘
移动端 Safari 和微前端场景要额外小心
这些环境对层叠上下文更敏感，容易放大浮动引发的问题。
- iOS Safari 在快速滚动后可能延迟渲染层叠关系，表现为聚焦反馈滞后或光标位置偏移；此时显式加
-webkit-user-select: text可重置文本选择状态 - 微前端沙箱或 Shadow DOM 中，弹出的日期选择器、下拉菜单常被挂到
body下，但若全局body { z-index: 0 }，整个浮层都会被压住——查真实 DOM 位置，给它的直接挂载容器（如div[role="dialog"]）设z-index: 2147483647 - 绝对不要对
input自己狂加z-index：它只是触发点，不是视觉主体；强行提级可能破坏表单焦点链或与 UI 库冲突
最常被跳过的一步是验证共同父级是否意外创建了层叠上下文——调试时别只盯着z-index数字，先看position和祖先元素有没有悄悄建了个“小世界”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
