z-index只在同层叠上下文中生效；跨上下文时，父级整体层级优先，子元素再高的z-index也无法突破。根本原因包括：元素未设置position（如仍为static）、父容器触发了层叠上下文（如transform、opacity
z-index 不是写个大数字就万事大吉，它只在「同层叠上下文」里比大小；跨上下文时，父级的层级地位决定一切——子元素再高的 z-index 也出不去。
为什么写了 z-index 却没效果？先查 position 和层叠上下文
最常见的情况不是值设小了，而是根本没触发层叠机制：
- 目标元素没设
position（比如还是position: static），z-index直接被浏览器忽略 - 父容器用了
transform、opacity: 0.99、filter: blur(1px)等属性，悄悄创建了新层叠上下文，子元素的z-index只在它内部生效 - 父元素本身有
z-index: auto（默认）或没设z-index，但它又恰好满足创建层叠上下文的条件（比如opacity ），那它就成了一个“隔离区”
调试时打开浏览器开发者工具的「Layers」面板，或勾选「Show stacking order」，一眼就能看出哪些元素意外成了层叠上下文的边界。
多个弹窗/浮层共存时，z-index 值怎么不冲突？
硬拼数字（z-index: 9999 → z-index: 99999）只会让维护越来越难。更可靠的做法是分段预留：
- 用 CSS 自定义属性统一管理：
--z-toast: 700、--z-tooltip: 800、--z-dropdown: 900、--z-modal: 1000 - 每个组件只用自己区间的基准值，内部嵌套再微调：
.modal__overlay { z-index: var(--z-modal); }，.modal__content { z-index: calc(var(--z-modal) + 1); } - 避免在局部样式里写死
z-index: 2147483647这类“最大整数”，它既没实际意义，还掩盖了结构问题
absolute 定位 + z-index 配合时容易踩什么坑？
模态框、下拉菜单这类组件常用 position: absolute 或 fixed，但组合 z-index 时有隐性约束：
-
.dropdown如果加了transform: translateY(0)做动画，它就自动创建新层叠上下文，里面所有子项的z-index都只能和它比，无法盖过同级的.header - 遮罩层（overlay）必须和弹窗主体处于同一层叠上下文，否则即使
z-index更高，也可能被父容器裁剪或压住 - 不要给弹窗内部按钮、标题等元素乱设高
z-index，容易导致内容层被自己组件内的其他元素挡住（比如按钮被.modal__title盖住）
真正难的不是写多少个 z-index，而是判断哪个祖先元素正在悄悄“关押”你的子元素——它可能没写 z-index，但一个 transform 就足够让它变成一层不可穿透的墙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
