提示层被输入框遮挡的主因是z-index层级不足或处于不同stacking context：需确保提示层z-index足够大（如9999）、脱离父级限制挂载至body、避免transform/filter等隐式创建新堆叠上下文的属性，并在移动端聚焦时动态重定位。
提示层 z-index 比输入框低，导致被遮挡
这是最常见原因：提示层（如 tooltip、popover 或自定义 .hint）的 z-index 值小于其下方输入框（input 或 textarea）父容器的 z-index，或输入框本身设置了较高的层级。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查提示层和输入框的渲染层，看它们是否在同一个 stacking context 中
- 确保提示层的
z-index显式设置为足够大的数（如9999），且其父级没有transform、opacity < 1、will-change等触发新 stacking context 的属性 - 避免给输入框或其直接容器设
z-index，除非必要；若已设，提示层的z-index必须更高
提示层和输入框不在同一 stacking context，层级无法直接比较
当提示层和输入框分别处于不同 stacking context（比如一个在 position: relative + z-index: 10 的弹窗里，另一个在 body 下无定位的普通表单中），它们的 z-index 就像“两个平行宇宙”，互不干扰。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把提示层挂载到
body最外层（例如用ReactDOM.createPortal或手动document.body.appendChild），脱离原 DOM 层级束缚 - 检查提示层父容器是否意外加了
transform: translateZ(0)、filter: blur(0)等隐式创建 stacking context 的 CSS 属性 - 输入框所在表单区域如果用了
position: relative+z-index: 1，那整个表单就变成一个 stacking context，此时提示层必须比它高，且不能被它的父级截断
输入框获得焦点时触发浏览器默认行为（如 iOS Safari 软键盘上推）
移动端尤其明显：软键盘弹出后页面重排，提示层位置计算失效，可能被顶到输入框下方，或因 viewport 缩小而错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
focus和blur事件，在输入框聚焦时强制重新定位提示层（调用updatePosition()或等效逻辑） - 避免用
position: fixed做提示层——它在软键盘弹出时容易脱离视口锚点；改用position: absolute并绑定到最近的position: relative容器（需确保该容器不会随键盘滚动） - 在 iOS 上可临时加
scrollIntoView({ behavior: 'smooth', block: 'nearest' })防止输入框被键盘完全盖住
.tooltip {
position: absolute;
z-index: 9999;
/* 避免触发新 stacking context */
transform: none;
filter: none;
will-change: auto;
}提示层真正难搞的不是 z-index 数值本身，而是它被包裹在某个看似无关的 transform 或 opacity 容器里——这时候调再大的 z-index 也没用。
