层叠上下文的概念

层叠上下文是CSS中一个重要的概念，决定了元素在页面上的层叠顺序。理解层叠上下文可以帮助开发者更好地控制元素的显示层级，避免z-index失效等问题。

层叠上下文的形成条件

层叠上下文的形成有多种方式，以下是常见的几种情况：

1. 根元素（HTML）：文档的根元素自动创建一个层叠上下文。
2. position属性为absolute或relative且z-index不为auto：

.box {
  position: relative;
  z-index: 1; /* 创建层叠上下文 */
}

3. position属性为fixed或sticky：即使z-index为auto也会创建层叠上下文。
4. flex容器的子项且z-index不为auto：

.flex-container {
  display: flex;
}
.flex-item {
  z-index: 1; /* 创建层叠上下文 */
}

5. opacity值小于1：

.transparent {
  opacity: 0.99; /* 创建层叠上下文 */
}

6. transform值不为none：

.transformed {
  transform: translateX(10px); /* 创建层叠上下文 */
}

层叠顺序规则

在一个层叠上下文中，元素的层叠顺序遵循以下规则（从下到上）：

1. 层叠上下文的背景和边框
2. z-index为负的子层叠上下文
3. 普通流中的块级元素
4. 浮动元素
5. 普通流中的行内元素
6. z-index为auto或0的子层叠上下文
7. z-index为正的子层叠上下文

<div class="parent">
  <div class="child1">负z-index</div>
  <div class="child2">普通块级元素</div>
  <div class="child3" style="float: left">浮动元素</div>
  <span class="child4">行内元素</span>
  <div class="child5">z-index: auto</div>
  <div class="child6">正z-index</div>
</div>

层叠上下文的嵌套特性

层叠上下文具有嵌套特性，子元素的z-index只在父层叠上下文中有效：

<div class="parent1" style="position: relative; z-index: 1">
  <div class="child1" style="position: absolute; z-index: 100">
    <!-- 这个z-index:100只在parent1的上下文中有效 -->
  </div>
</div>
<div class="parent2" style="position: relative; z-index: 2">
  <div class="child2" style="position: absolute; z-index: 1">
    <!-- 虽然child2的z-index比child1小，但因为parent2的z-index更大，所以child2会显示在上层 -->
  </div>
</div>

实际应用中的常见问题

1. z-index失效：当元素没有创建层叠上下文时，z-index可能不会按预期工作：

.modal {
  position: fixed;
  /* 缺少z-index声明 */
  /* 需要添加z-index或确保父元素创建了层叠上下文 */
}

2. opacity导致的层叠上下文：

.parent {
  opacity: 0.9; /* 意外创建了层叠上下文 */
}
.child {
  position: absolute;
  z-index: -1; /* 现在会在parent的背景下方 */
}

3. transform的影响：

.slider {
  transform: translateX(0); /* 创建层叠上下文 */
  /* 可能导致内部定位元素的行为变化 */
}

调试层叠上下文问题

可以使用浏览器开发者工具来调试层叠上下文问题：

1. 在Chrome中，通过"Layers"面板查看层叠顺序
2. 使用"Computed"面板检查元素是否创建了层叠上下文
3. 临时修改CSS属性来隔离问题

// 可以通过JavaScript检查元素是否创建了层叠上下文
function hasStackingContext(element) {
  const styles = window.getComputedStyle(element);
  return (
    styles.zIndex !== 'auto' ||
    styles.opacity < 1 ||
    styles.transform !== 'none'
    // 其他创建层叠上下文的条件...
  );
}

性能考虑

层叠上下文会影响浏览器的渲染性能：

1. 过多的层叠上下文会增加合成层的数量
2. 每个合成层需要额外的内存
3. 层叠上下文的改变会触发重绘

优化建议：

/* 避免不必要的层叠上下文 */
.optimized {
  /* 除非需要，否则不要使用会创建层叠上下文的属性 */
  will-change: auto; /* 谨慎使用 */
}

与其他CSS特性的交互

层叠上下文与其他CSS特性有复杂的交互：

1. mix-blend-mode：会创建新的层叠上下文

.blended {
  mix-blend-mode: multiply; /* 创建层叠上下文 */
}

2. filter：应用filter会创建层叠上下文

.filtered {
  filter: blur(2px); /* 创建层叠上下文 */
}

3. isolation属性：显式创建层叠上下文

.isolated {
  isolation: isolate; /* 专门用于创建层叠上下文 */
}

移动端特殊考虑

在移动端浏览器中，层叠上下文的行为可能有差异：

1. 某些移动浏览器对position: fixed的处理不同
2. 触摸事件可能受到层叠顺序的影响
3. 移动端性能限制更明显

/* 移动端优化 */
.mobile-modal {
  position: fixed;
  z-index: 1000;
  /* 确保在移动设备上正确显示 */
  transform: translateZ(0); /* 有时可以提升渲染性能 */
}