z-index 有效需满足定位且同层叠上下文，常见误区是父级隐式创建新上下文；应建立语义化命名规范（如--z-modal:1000），优先用 DOM 顺序控制叠层。
盒子叠层关系混乱，核心问题通常不是 z-index 本身难用，而是缺乏统一的层级规范和上下文理解。z-index 只在定位元素（position 为 relative、absolute、fixed 或 sticky）的层叠上下文（stacking context）内生效——而层叠上下文会“截断”外部 z-index 的影响。理清结构、建立规则，比盲目调数字更有效。
明确哪些元素能参与 z-index 排序
只有满足两个条件的元素，z-index 才起作用：
- 设置了
position（非static） - 位于同一个层叠上下文中（即没有被父级创建的新 stacking context 隔离）
常见误区：给一个 div 设了 z-index: 999，但它父容器有 opacity: 0.99 或 transform: translateZ(0)，就会意外创建新层叠上下文，导致该子元素的 z-index 只在父内部生效，无法盖过兄弟容器。
建立项目级 z-index 命名与取值规范
避免随意写 z-index: 9999 或 z-index: 123。推荐按功能分层，预留间隙便于插入：
立即学习“前端免费学习笔记（深入）”；
-
--z-modal: 1000（模态框、全屏遮罩） -
--z-dropdown: 900（下拉菜单、Tooltip） -
--z-sticky-header: 800（吸顶导航栏） -
--z-default: 1（普通定位元素，如小图标、提示角标） -
--z-hidden: -1（需要视觉隐藏但保留布局的元素）
用 CSS 自定义属性统一管理，在 :root 中定义，组件中通过 z-index: var(--z-dropdown); 调用，既可维护又防冲突。
排查嵌套中的层叠上下文干扰
当某块区域“怎么调 z-index 都不盖不住旁边元素”，大概率是它被包裹在了一个隐式创建层叠上下文的父容器里。以下属性会触发新 stacking context（即使没设 z-index）：
-
opacity小于 1 -
transform不为 none（包括translateZ(0)） -
filter不为 none -
will-change包含 transform/opacity/filter 等 isolation: isolate
检查 DOM 结构，用浏览器开发者工具的“Layers”面板或勾选 “Show layer borders” 辅助识别；必要时给父容器加 z-index: 0（配合定位）显式创建可控上下文，而非依赖隐式行为。
用层叠顺序代替硬编码数字
现代方案可减少对 z-index 的依赖：
- 优先用 DOM 顺序：同层叠上下文中，后出现的定位元素默认在前一个之上（无需 z-index）
- 用
contain: layout paint隔离渲染区域，避免无意提升层级 - 复杂交互动效（如弹窗入场）用
view-transition或prefers-reduced-motion感知逻辑控制显示时机，而非强控 z-index
z-index 是“最后手段”，结构清晰、语义合理、DOM 有序，才是稳定叠层的基础。
基本上就这些。不复杂但容易忽略——理清 stacking context，定好几档语义化数值，再配合结构优化，盒子叠层自然就服帖了。
