z-index写了没反应，主因是元素未定位（position为static）或被父级堆叠上下文隔离；需确保position非static，并逐级排查opacity
z-index 为什么写了却没反应
绝大多数情况不是值写小了，而是 z-index 根本没生效——它只对已定位元素起作用。只要元素的 position 是 static（默认值），无论你写 z-index: 9999 还是 z-index: -1，浏览器都会直接忽略。
- 常见错误现象：
div加了z-index: 100却始终被盖在下面；用 JS 动态添加样式后层级突然错乱，大概率是漏写了position - Flex / Grid 子项即使视觉上“浮动”，也仍需显式加
position: relative才能启用z-index - 框架组件（如 Vue 的
v-if或 React 的内联样式）可能覆盖你写的position，导致失效 - 快速验证：打开 DevTools →「Computed」面板 → 搜索
position和z-index，确认最终值不是static且z-index显示为具体数字（而非auto）
为什么 z-index: 999 还是被 z-index: 1 盖住
问题不在数字本身，而在两个元素分属不同堆叠上下文（stacking context）。父容器一旦创建了新上下文，子元素的 z-index 就只在内部比大小，无法“越级”影响外部。
- 触发新堆叠上下文的常见操作：
position: relative+z-index（非auto）、opacity: 0.99、transform: translateZ(0)、will-change: transform - iOS Safari 对
transform和will-change极其敏感，哪怕只为硬件加速，也可能意外创建上下文 - 排查方法：DevTools 中搜索 “Stacking Context”；临时注释掉父级的
opacity或transform，看层级是否恢复 - 不要盲目堆高数值（如
z-index: 999999），先理清 DOM 嵌套链上谁悄悄当了“小 boss”
父子元素的 z-index 谁说了算
子元素永远在父元素之上，但它的“高度”受限于父容器的堆叠上下文边界——父级层级低，子再高也出不去。
- 子元素的
z-index只影响它和兄弟元素的顺序，不改变整个父容器在外部的层级位置 - 若两个子元素分属不同父容器（比如一个在
.modal下，一个在.header下），谁在上取决于这两个父容器自身的z-index比较结果 - 典型场景：轮播图组件里弹出的按钮被页面顶部导航栏遮住；Modal 嵌套在带
transform的卡片里，怎么调z-index都不顶用 - 实操建议：确保需要全局分层的元素（如弹窗、下拉、Tooltip），其最近共同祖先不提前创建堆叠上下文
iframe 和非定位元素怎么处理层级
iframe 是完全独立的文档环境，它的 z-index 与父页面无任何关系；非定位元素（position: static）则根本不在层叠上下文中参与排序。
- 想遮盖
iframe，只能在同级 DOM 插入遮罩层，并确保该遮罩的父容器有更高堆叠优先级 - 非定位元素与父页面无任何关系；想遮盖它，必须在同级 DOM 插入遮罩，并确保该遮罩的父容器有更高堆叠优先级
- 同一上下文中，未设
z-index的定位元素默认归入z-index: auto层，渲染顺序按 HTML 出现先后：DOM 中靠后的那个显示在前面 - 真正难调的不是数值本身，而是搞清当前元素嵌在哪几层上下文中——DevTools 的「Layers」面板或「Computed」里的 stacking context 提示，比硬猜靠谱得多
z-index 数值。最容易被忽略的是：你以为在调整个别按钮的层级，其实是在调试整棵上下文嵌套链——从目标元素往上逐层检查父级是否悄悄创建了“隔离卡”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
