CSS z-index 属性

基础概念 

1. 核心作用
- 控制定位元素在Z轴方向的显示优先级
- 数值越大越靠近用户视线

2. 生效条件
必须配合以下定位属性使用：

position: relative | absolute | fixed | sticky

3. 取值范围
- auto（默认，继承父级堆叠顺序）
- 整数（正/负/零）
- inherit（显式继承）

层叠上下文详解

1. 创建条件（触发层叠上下文）
► 根元素（HTML）
► position非static且z-index非auto
► opacity < 1
► transform/filter非none
► will-change指定特定属性
► flex/grid容器的子项设置z-index
► isolation: isolate

2. 层叠顺序规则（从底到顶）
1) 层叠上下文的背景/边框
2) z-index为负的子上下文
3) 常规流块级元素
4) 浮动元素
5) 常规流内联元素
6) z-index为auto/0的子元素
7) z-index为正的子元素

使用场景

1. 组件层级控制
• 模态框（z-index: 1000+）
• 下拉菜单（z-index: 100-200）
• 悬浮提示（z-index: 10-50）

2. 动态层级管理

.slide {
  z-index: 0;
  transition: z-index 0.3s;
}
.slide.active {
  z-index: 1;
}

3. 响应式适配

@media (max-width: 768px) {
  .mobile-nav {
    z-index: 999;
  }
}

特殊情况处理

1. 浏览器差异
► IE6/7 BUG：position:relative需要触发hasLayout
► 移动端限制：部分浏览器最大支持2^24-1

2. 交互影响
► 与float：浮动元素需设置position才能响应z-index
► 与pointer-events：none值会穿透高z-index元素

3. 常见陷阱
× 非定位元素设置z-index无效
× 父级创建层叠上下文会限制子元素作用域
× 负值可能被body背景遮挡

调试与最佳实践

1. 调试技巧
• Chrome开发者工具：
   → 元素面板显示z-index值
   → 使用颜色标记不同层级
• 临时样式：

 [data-debug] { outline: 1px solid red !important }

2. 项目管理方案
► Sass变量管理：

$z-layers: (
  modal: 1000,
  header: 100,
  tooltip: 50
);

► 层级规范示例：
0-9    → 基础内容
10-99  → 悬浮元素
100-999 → 全局组件
1000+  → 特殊场景

性能优化

1. 减少层叠上下文
避免不必要的：
- transform: translateZ(0)
- will-change过度使用2. 动态更新优化

// 不良实践
element.style.zIndex = Date.now();

// 推荐方案
const zIndexManager = {
  base: 1000,
  getNext() {
    return this.base++;
  }
}

兼容性备忘

1. 历史浏览器
• IE6/7：需触发hasLayout
• iOS8-：部分版本限制最大z-index

2. 现代解决方案

@supports (z-index: 2147483647) {
  .max-z { z-index: 2147483647 }
}

[注] 2147483647为2^31-1（32位系统最大安全整数）