结论：z-index 失效主因是层叠上下文被意外创建，导致子元素 z-index 被限制在局部范围内；需检查祖先元素是否触发新上下文（如 opacity
直接说结论：不是“解决层叠上下文问题”，而是主动管理它——z-index 失效、元素被意外遮挡，90% 是因为没意识到某个祖先元素悄悄创建了新的层叠上下文，把子元素的 z-index 锁死在局部范围内。
为什么设置了高 z-index 还是被盖住？
常见错误现象：div 设置了 position: absolute 和 z-index: 9999，但依然被一个 z-index: 10 的导航栏挡住。
根本原因不是数值不够大，而是这两个元素不在同一个层叠上下文中。比如导航栏父容器设置了 opacity: 0.99 或 transform: translateY(0)，它就创建了一个新层叠上下文；而你的弹窗如果嵌套在这个容器内部（或其兄弟节点但层级更低），它的 z-index: 9999 只在那个父上下文里有效，无法突破到根上下文去和导航栏比。
使用场景：模态框、下拉菜单、自定义光标、地图覆盖物等需要“全局置顶”的元素。
- 检查所有祖先元素是否触发了层叠上下文（
position+z-index、opacity 、<code>transform != none、filter != none、isolation: isolate） - 用 Chrome DevTools 的 Layers 面板（Rendering → Show layer borders）直观查看哪些区域形成了独立层叠上下文
- 若必须保留某个祖先的
transform或opacity，就把需要置顶的元素移出该祖先，挂到下
position: fixed 元素为什么会被 position: absolute 覆盖？
错误认知：以为 fixed 天然层级更高。实际上，两者都创建层叠上下文，谁在 HTML 中更靠后、或其父上下文层级更高，谁就显示在上层。
典型场景：页面顶部有 position: fixed 导航栏，但某个轮播图组件内部用了 position: absolute + z-index: 999，结果轮播图的指示点盖住了导航栏 logo。
参数差异：关键不在 position 类型，而在它们各自所属的层叠上下文的“起始 z-index”值。一个 z-index: 1 的 fixed 元素，如果其父上下文 z-index: 2，而另一个 absolute 元素的父上下文是 z-index: 3，那后者整棵树都会压在前者上面。
- 给
fixed导航栏设置显式z-index（如z-index: 1000），且确保它的父元素不创建新上下文（避免加opacity、transform等） - 不要依赖默认堆叠顺序，所有需要控制层级的定位元素都应设
z-index - 避免在导航栏外层容器上使用
transform或半透明背景——它们会悄无声息地降级你的z-index权限
如何让下拉菜单真正浮在地图/视频/全屏背景之上？
常见错误：只给下拉菜单设 z-index: 999，但地图容器本身是 position: relative + z-index: 1，而菜单父节点没定位，导致菜单按文档流顺序排在地图后面。
正确做法分两步：先建立相对定位锚点，再用 z-index 定序。
- 下拉菜单的**直接父元素**必须是
position: relative（或absolute/fixed），否则position: absolute的菜单会向上找直到，脱离预期位置 - 地图/视频容器若用了
position: relative，务必给它设一个**明确且较低的z-index**（如z-index: 1），而不是留auto - 下拉菜单自身设
position: absolute+z-index: 100，数值只需比地图容器高即可，不必盲目堆大数 - 如果地图用了
transform或opacity，它已创建新上下文——此时菜单必须提升到同一级或更高层叠上下文，最稳妥是挂到下并用 JS 动态定位
最易被忽略的一点：层叠上下文一旦创建，就不可逆。你不能“取消”某个祖先的上下文，只能绕开它——要么删掉触发属性，要么把要置顶的元素物理移出该祖先范围。别在 z-index 上硬刚，先看结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
