z-index设再大也盖不住，根本原因是元素未定位或被父级堆叠上下文隔离；必须确保position为relative/absolute/fixed/sticky，并检查opacity、transform、filter等属性是否隐式创建新堆叠上下文，导致子元素z-index被限制在局部范围内。
z-index设再大也盖不住，先确认元素是否已定位
z-index只对position值为relative、absolute、fixed或sticky的元素生效；position: static（默认）时，浏览器直接忽略z-index。
打开 Chrome DevTools → 选中被遮挡元素 → «Computed» 面板搜position，若显示static，说明z-index根本没启动。
- 临时加
position: relative（不位移，不影响布局），看遮挡是否立刻消失 - 别给所有元素统一加
position: relative——可能意外创建堆叠上下文或干扰 flex/grid 行为 - flex 或 grid 子项虽未显式设
position，也能用z-index，但仅限该容器内部生效，且仍受祖先堆叠上下文限制
遮挡来自父级“结界”：检查是否创建了堆叠上下文
真正拦住你的不是数值不够，而是某个父元素悄悄建了个“玻璃罩”——只要它设置了以下任一属性，就会创建新堆叠上下文，把子元素的z-index锁死在内部：
-
opacity小于 1（哪怕opacity: 0.999） -
transform不为none（包括transform: translateZ(0)、scale(1)、rotate(0)） -
filter不为none（哪怕filter: blur(0)或filter: opacity(1)） -
will-change: transform或will-change: opacity isolation: isolate-
position: fixed或sticky且z-index不是auto
用 DevTools 快速定位：
→ 选中被遮挡元素 → «Layout» 标签页看Stacking context是否为Yes；
→ 或开 «Rendering» 面板 → 勾选Show layers panel → 在 «Layers» 中找带分组边界的节点，点它高亮对应 DOM；
→ 逐级点击父节点，在 «Computed» 里搜transform、opacity、filter等，任意一个非默认值，就是源头。
overflow: hidden 是最隐蔽的裁剪+结界双重陷阱
很多导航栏或卡片容器加了overflow: hidden只为防内容溢出，却不知它和非static的position组合时，会强制创建堆叠上下文——下拉菜单就算position: absolute + z-index: 9999，也只能在父容器这个“盒子”里堆叠，既出不去，还可能被直接裁掉底部。
- 删掉
overflow: hidden是最直接解法；若必须保留视觉控制，改用padding、min-height或clip-path - 把下拉菜单移出该容器，挂到
下（常见于 React Portal 或 Vue Teleport） - 注意：
overflow: auto或scroll同样触发堆叠上下文，不限于hidden
调谁的 z-index 才真有效？别只盯子元素
子元素z-index: 9999再高也没用，它出不去父级“结界”。真正要调的是那个创建堆叠上下文的父容器本身的z-index值。
- 如果父容器加
transform只为过渡动画，且可删，直接移除比堆数字干净十倍 - 如果必须保留（如淡入/模糊），就给该父容器加
position: relative+ 合理z-index（比如z-index: 1050），而不是只狂设子元素 - 避免设
z-index: 2147483647——UI 框架常按区间管理层级（如弹窗 1000–1100，Tooltip 2000–2100），硬塞极大值反而压住正在过渡的层，导致点击失效 - 用 CSS 自定义属性统一管理：
--z-modal: 1050、--z-tooltip: 1100，比散落硬编码更可控
复杂点在于：一个页面可能有多个独立堆叠上下文并存，而它们之间的相对顺序，由各自创建者的文档流位置和z-index共同决定——不是所有“高 z-index”都能赢，得看它站在哪一层“地基”上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
