绝对定位元素消失或被遮挡，通常因父容器触发了层叠上下文（如 transform、opacity
绝对定位元素突然消失或被盖住，先检查父容器有没有 transform
很多情况下你没动 z-index，但元素就是被遮挡了——八成是父级加了 transform: translateZ(0)、scale(1) 或其他触发层叠上下文的属性。一旦父容器创建了新的层叠上下文，它的所有子元素（包括 position: absolute）的 z-index 就只在该上下文内生效，不再和页面其他区域比高低。
- 常见诱因：
transform、opacity小于 1、filter、will-change、isolation: isolate - 验证方法：用浏览器开发者工具选中父容器，看“Computed”里是否出现
contain: paint或 “Layer” 被单独切出 - 临时排查：给疑似父容器加
transform: none !important（仅调试用）
z-index 不生效？确认它是否在同一个层叠上下文中
z-index 只对定位元素（position 为 relative、absolute、fixed 或 sticky）有效，且它的作用范围严格受限于最近的层叠上下文根元素。两个不同层叠上下文里的 z-index: 999 和 z-index: 1，谁在上谁在下，不由数字决定，而由它们各自上下文的堆叠顺序决定。
- 层级关系优先级高于
z-index数值：文档流顺序 → 层叠上下文创建顺序 → 同一上下文内z-index - 避免嵌套多层绝对定位容器：每多一层带
transform的父级，就多一层隔离的z-index空间 - 如果必须分层，用
z-index控制上下文本身的顺序，而不是只调子元素
想让绝对定位弹层（如 Tooltip、Modal）浮在最上，别只依赖 z-index: 9999
硬写超大 z-index 值只是掩耳盗铃。真正起作用的是让弹层脱离原有层叠上下文，直接挂到 下，或确保其祖先链上没有意外创建上下文的样式。
- 推荐做法：用 JavaScript 把弹层节点
appendChild到document.body，再配合position: fixed或position: absolute+top/left动态计算 - 如果必须保留在原 DOM 位置，检查从弹层到
路径上的每个父级，移除不必要的transform、opacity、filter - 注意
fixed元素会创建新层叠上下文，但它的上下文根是视口，通常更可控
Chrome DevTools 里怎么快速定位遮挡来源
靠肉眼猜哪个父级搞鬼效率太低。Chrome 的“Layers”面板和“Rendering”设置能直接暴露层叠结构问题。
- 打开 DevTools → ⚙️ Settings → Rendering → 勾选 “Paint flashing” 和 “Layer borders”
- 遮挡发生时，观察是否有意料之外的绿色/蓝色图层框包裹了不该包裹的区域
- 右键目标元素 → “Show layers” → 查看 “Stacking context” 信息，确认它属于哪个上下文、该上下文由哪个 CSS 属性触发
- 特别留意
transform: translateZ(0)这类“隐形触发器”，它不改变视觉，却悄悄建了个新层
层叠上下文不是 bug，是 CSS 渲染模型的固有机制；问题往往出在“以为自己在全局调 z-index”，其实早被关进某个父级的小黑屋里了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
