z-index设再大也没用，因层叠上下文错位：input需加position: relative才能启用z-index，且父容器若含transform、opacity
直接给 <input> 加 position: relative 和足够大的 z-index，是最快生效的解法。但只改这一处大概率失效——遮挡本质是层叠上下文错位，不是 z-index 数值不够。
为什么 z-index 设再大也没用
常见错误是给定位元素设 z-index: 9999，输入框却依然点不中、光标不显示。这不是数值问题：
-
<input>默认是position: static，z-index完全被忽略，必须显式加position: relative（或其他非 static 值）才能启用 - 如果定位元素和输入框的父容器分别用了
transform、opacity: 0.99或will-change，它们会各自创建独立的层叠上下文，彼此 z-index 不可比 - Element UI、Ant Design 等框架的下拉菜单常挂载到
body下，而表格或表单在局部容器里，天然不在同一上下文起点
如何快速验证焦点是否被拦截
别急着改 CSS，先确认是不是“视觉遮挡”还是“事件被吞”：
- 在开发者工具中临时给
<input>加样式：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测试
定位元素与输入框共处一室的写法
最稳的方式是让它们共享同一个层叠上下文起点：
- 用一个
position: relative的包裹容器同时包住<input>和定位元素（如下拉面板、错误提示） - 定位元素设
position: absolute，用top/left相对于该容器定位，而非整个页面 - 容器自身不设
z-index，由内部元素协调：比如<input>设z-index: 10，下拉面板设z-index: 11 - 避免在该容器或其祖先上使用
transform、overflow: hidden、filter—— 这些会悄悄创建新层叠上下文
el-table 固定列遮挡下拉菜单的特殊处理
Element UI 的 .el-table__fixed 容器容易“吃掉”弹出菜单，原因不是 z-index，而是高度计算偏差和层叠上下文错位：
- 检查
.el-table__body-wrapper及其父级是否含transform或opacity ，临时移除验证 - 把下拉菜单从
body移回触发元素附近：Vue 2.x 用popper-append-to-body="false"，Vue 3.x 用teleported="false" - 强制
.el-table__body-wrapper滚动：加overflow-x: scroll，修复无横向滚动条时的高度塌陷 - 给
.el-dropdown-menu显式设置background-color，避免透明背景被误判为“不可见”
最容易被忽略的是：所有定位交互都依赖当前 DOM 结构的稳定性。一旦父容器用了 transform 或 overflow: hidden，getBoundingClientRect() 和 scrollIntoView() 都可能静默失效，且不报错。调试时先看 computed 样式里的 z-index 是否为 auto，再逐级往上查层叠上下文触发点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
