z-index仅对position为relative、absolute、fixed或sticky的元素生效；其比较受限于层叠上下文，子元素z-index只在自身上下文中有效，不跨上下文比较。
z-index只对定位元素生效
很多人给一个普通
直接写
z-index: 999，发现完全没反应——不是z-index失效，是它根本没被浏览器“看见”。z-index只在元素的position值为relative、absolute、fixed或sticky时才起作用。
- 静态定位（
position: static）是默认值，此时z-index会被忽略，无论设成多少都无效 -
position: relative最常用，不改变文档流位置，但能激活z-index - 用
position: absolute时要注意父容器是否设置了position，否则会相对于最近的定位祖先（或初始包含块）定位
z-index不是全局数字比大小
你以为z-index: 100一定盖过z-index: 10？不一定。层叠上下文（stacking context）会把z-index“截断”——子元素的z-index只在自己的层叠上下文中比较，不会穿透到父级上下文里去跟别人比。
- 触发层叠上下文的常见方式：
opacity小于1、transform非none、filter有值、will-change指定相关属性、isolation: isolate，当然还有z-index本身（当它处于定位且非auto时） - 比如父容器
opacity: 0.99，它就形成了新层叠上下文；里面两个子元素，即使一个z-index: 9999、另一个z-index: 1，它们也只在父容器的“层”里排序，而这个父容器整体可能被另一个z-index: 2的兄弟元素压在下面 - Chrome DevTools 的 Layers 面板或 Rendering > Paint flashing 可以帮你识别哪些元素创建了层叠上下文
避免z-index满天飞的实用策略
项目里出现z-index: 999999或者十几个不同层级的魔数，基本说明层叠逻辑已经失控。真正可控的做法是分层建模，而不是靠堆数字。
- 定义几档语义化层级常量，比如
--z-nav: 100、--z-modal: 500、--z-tooltip: 800，全项目统一用CSS自定义属性管理 - 模态框（
modal）务必确保其整个容器（包括遮罩层和内容）都在同一个层叠上下文中，否则可能出现“遮罩在下、内容在上”的错位 - 不要给每个按钮、图标都加
z-index；需要微调时优先用position: relative+top/left，更轻量且不触发新上下文
移动端Safari中z-index的隐藏陷阱
iOS Safari对层叠上下文更敏感，尤其在使用transform: translateZ(0)或backface-visibility: hidden做硬件加速时，极易意外创建新层叠上下文，导致弹窗被卡在某个父容器下面出不来。
立即学习“前端免费学习笔记（深入）”；
- 检查是否无意中给某层加了
transform（哪怕只是translateY(0)），它和opacity一样会创建独立层叠上下文 - 调试时临时删掉
-webkit-overflow-scrolling: touch（已废弃但旧代码常见），它也可能干扰层叠顺序 - 真机测试不能省：模拟器里看着正常，Safari实际渲染时的层叠行为可能完全不同
z-index就完事，关键在于理解谁创建了上下文、谁在哪个上下文里排序。一不留神，你调的不是层级，是嵌套的“俄罗斯套娃”。
