z-index不生效主因是父容器创建了堆叠上下文；z-index仅在同上下文中有效，跨上下文时父级渲染顺序优先；relative元素设z-index也会创建上下文；auto不等于0，fixed元素默认属根上下文但受transform等影响。
z-index 不生效？先看有没有创建堆叠上下文
绝对定位元素的 z-index 失效，绝大多数时候不是写错了值，而是父容器悄悄创建了新的堆叠上下文，把子元素“关进去了”。z-index 只在同一个堆叠上下文中起作用，跨上下文时，父级的渲染顺序直接压倒子级的 z-index。
触发堆叠上下文的常见方式包括：position: relative/absolute/fixed/sticky + z-index（非 auto）、opacity 小于 1、transform 不为 none、filter 不为 none、will-change 指定相关属性等。
- 检查父级是否加了
transform: translateZ(0)或opacity: 0.99—— 这些看似无害的操作会隐式创建堆叠上下文 - 用浏览器开发者工具的“Layers”面板（Chrome）或“Rendering”中的“Paint flashing”辅助判断，但最可靠的是在 Elements 面板里看 computed 样式中
stacking context是否被标记为true - 如果只是想让子元素能和兄弟元素比层级，又不想受父级限制，可考虑把该子元素移出当前父容器 DOM 结构（例如用
Portal或position: fixed配合 JS 动态计算位置）
relative 定位元素也能当“层叠锚点”
很多人以为只有 position: absolute 才参与层叠，其实 position: relative 元素只要设了 z-index（且不为 auto），就会成为堆叠上下文的起点，并影响内部所有后代的层叠范围。
-
position: relative; z-index: 1和position: absolute; z-index: 1对层叠的影响完全不同：前者创建上下文，后者只在当前上下文中排序 - 若一个
relative父容器设置了z-index: 2，它内部一个absolute子元素设z-index: 999，也无法盖过同级另一个relative父容器（z-index: 3）里的内容 - 调试时可临时给疑似“锚点”的父级加
outline: 1px solid red，确认它的视觉边界和层级归属
auto z-index 的陷阱：它不等于 0
z-index: auto 是默认值，但它在层叠规则里代表“不参与显式排序”，而不是“排在最底下”。它的实际层叠等级取决于元素在 HTML 中的顺序和是否创建了堆叠上下文。
立即学习“前端免费学习笔记（深入）”；
- 两个同级
absolute元素，都没设z-index（即auto），后写的那个会盖在先写的上面 —— 这是文档流顺序决定的 - 一旦父级有
z-index: 1，其内部所有z-index: auto的子元素，都会被整体归入这个新上下文，无法跳出和外部元素比高低 - 不要用
z-index: 0去“重置”层级，它会强制创建堆叠上下文；真要避免干扰，就保持z-index: auto并确保父级也没创建上下文
fixed 元素的特殊性：它天然属于根堆叠上下文
position: fixed 元素默认脱离普通文档流，并且通常直接隶属于视口（root stacking context），所以它的 z-index 是跟 下其他同级 fixed/absolute 元素直接比的，不太受中间父级影响——但前提是父级没用 transform 或 opacity 等“偷偷”创建上下文。
- 如果 fixed 元素被包在一个
transform: scale(1)的容器里，它就不再是根上下文成员，而是被拉进那个容器的上下文中 - 移动端 Safari 对
fixed+transform组合特别敏感，有时即使transform: none也会残留上下文，建议用will-change: auto覆盖掉 - 需要让 fixed 弹窗始终最上层？保险做法是把它挂到
document.body直接子节点，并设z-index: 2147483647（最大安全整数），同时确保 body 没有opacity或filter
堆叠上下文不是 CSS 里最常写的部分，但它是少数几个“改一行代码，整个页面层级全乱”的机制之一。真正麻烦的不是理解规则，而是在复杂组件嵌套、动画库介入、框架 Portal 渲染之后，你根本不知道哪一层悄悄建了个上下文。多看 computed 样式里的 stacking context 标记，比猜 z-index 数值靠谱得多。
