z-index生效需满足两个前提：元素必须设置position为relative/absolute/fixed/sticky，且处于同一层叠上下文中；父级创建的层叠上下文会隔离子元素z-index比较，导致高数值仍被遮挡。
z-index 不是“越大越好”，而是要配合定位和层叠上下文分层管理——写 9999 仍被遮挡，大概率是因为你掉进了某个父级创建的层叠上下文中。
z-index 生效的前提：必须显式设置 position
很多元素加了 z-index 却没反应，根本原因是没触发定位上下文。CSS 中只有 position 值为 relative、absolute、fixed 或 sticky 时，z-index 才真正参与计算。
- 别依赖 Grid/Flex 子项“自动可叠”：即使用了
display: grid，子元素仍需自己加position: relative才能启用z-index -
table元素默认position: static，直接写z-index: 100无效；必须加position: relative - Vue/React 组件中，内联样式或 scoped CSS 可能覆盖你的
position声明，用 DevTools 查看 Computed → position 确认是否生效
层级冲突的真实原因：层叠上下文隔离了 z-index 比较
两个元素 z-index 分别是 999 和 1，但 1 的那个反而盖住了 999 的，不是数值错了，而是它们不在同一个“层叠世界”里。
- 只要父容器有
position: relative+z-index（非 auto），它就创建了一个新层叠上下文 - 它的所有子元素，无论
z-index多大，都只能在这个父容器内部比高低，无法跨出去和外部元素竞争 - 常见“陷阱父级”：带
transform、opacity: 0.99、filter、will-change的祖先元素，都会隐式创建层叠上下文 - 验证方法：Chrome DevTools → Layers 面板，看目标元素是否被包裹在意外的上下文“盒子”里
科学分配 z-index 数值：按语义分段，不堆魔数
用 1/2/3 或 9999/99999 并不比用 10/20/30 更可靠；关键是让数值反映真实 UI 层级意图，并留出扩展余地。
立即学习“前端免费学习笔记（深入）”；
- 基础层（背景、遮罩）：
--z-base: 0、--z-overlay: 10 - 内容层（卡片、表单、导航）：
--z-content: 50、--z-nav: 60 - 浮层层（下拉菜单、Tooltip）：
--z-dropdown: 100、--z-tooltip: 110 - 强提示层（Modal、全屏 Loading）：
--z-modal: 1000、--z-toast: 1010 - 避免负值，除非明确需要沉底；避免超过 2147483647（32 位整数上限），旧浏览器可能溢出
Grid 中重叠元素的 z-index 调试要点
Grid 本身不阻止重叠，但容易让人误以为“网格一占位就天然分层”。实际上，重叠 + 层级控制需要三步闭环：空间重合 → 定位激活 → z-index 显式排序。
- 先确认重叠是否真发生：DevTools → Elements → Computed →
grid-area，看是不是都算出了相同区域（比如都是"main"或1 / 1 / -1 / -1） - 拼写必须严格一致：
grid-template-areas: "header header" "main overlay"中的"overlay"和子元素grid-area: "overlay"引号类型、空格、大小写都不能错 - 每个要参与叠放的 Grid 子项，都要单独加
position: relative；父容器不用加position: relative来“开启”子项的z-index - DOM 顺序仍有影响：如果两个元素
z-index相同，后写的那个会盖住前写的；建议统一设值，不依赖默认顺序
最常被忽略的点是：你以为在调一个元素的 z-index，其实是在调它所属层叠上下文的入口权限。先查父链有没有“关着门”的容器，再动数值，比盲目加 9999 有效得多。
