z-index生效需满足两个前提：元素自身设定位属性，且其直接父容器非static定位；同时必须处于同一层叠上下文中，否则数值再大也无效。
z-index 能管住多层弹窗，但必须让每层都处在可比的层叠上下文中——否则数值再大也白写。
为什么模态框里的下拉菜单总被遮住
常见现象：.modal 设了 z-index: 1000，里面一个 .dropdown 设了 z-index: 9999，结果还是被 .modal 的遮罩层盖住。
根本原因不是数字小，而是 .modal 容器本身已创建了独立的层叠上下文（比如它用了 transform: translateZ(0) 或 opacity: 0.99），导致其内部所有子元素的 z-index 只在该容器内生效，无法“越界”覆盖外部或同级元素。
- 检查
.modal的 computed 样式，看是否有transform、filter、opacity 等隐式触发层叠上下文的属性 - 若必须保留这些效果，就在
.modal上显式加z-index: 0（注意：不是不设，而是设为 0 来明确其层级起点） - 真正要提层的是
.dropdown的直接父容器（比如.dropdown-trigger），而不是.dropdown自身
弹窗嵌套时 z-index 的合理取值策略
不要靠堆数字硬扛，而是按功能语义分段预留空间。例如：
:root {
--z-overlay: 1000;
--z-modal: 1010;
--z-modal-dropdown: 1020;
--z-toast: 1100;
}
这样做的实际好处：
-
--z-modal-dropdown比--z-modal高，但远低于--z-toast，避免 toast 被误盖 - 嵌套三层弹窗时，每层用 +10 步进，留足中间插槽（比如未来加个 loading 层可用 1015）
- 移动端 Safari 对
transform+z-index组合更敏感，显式声明父容器z-index: 0是最稳妥解法
absolute 定位与 z-index 必须配对使用
只写 z-index: 1020 不起作用，必须同时满足两个条件：
- 目标元素自身设
position: absolute（或fixed/relative/sticky） - 它的**直接父容器**设
position: relative（或其他非 static 值），否则定位参考点错乱，z-index失去锚定基础
典型错误：
.modal-content { /* 没设 position */ }
.dropdown { position: absolute; z-index: 1020; } /* ❌ 错：父容器没定位，.dropdown 相对视口定位，z-index 在根上下文中无效 */
.modal-content { position: relative; } /* ✅ 正确锚点 */
.dropdown { position: absolute; z-index: 1020; }
调试时优先查层叠上下文，不是查 z-index 数值
遇到“写了但没反应”，按这个顺序快速定位：
- 打开 DevTools，选中目标元素 → Computed 面板里确认
position不是static - 看
z-index行是否显示为具体数值；若显示为auto或灰显，说明未进入定位上下文 - 逐级向上点开父节点，在 Styles 面板里找是否有 “Stacking Context” 提示，或检查
transform、opacity、filter等属性 - 临时删掉疑似触发层叠上下文的父级样式，观察是否恢复预期层级
最常被忽略的点：z-index 生效的前提是“定位”，而“定位”的边界由层叠上下文决定——不是你写了就生效，是你写的那个元素，得在对的上下文里才作数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
