CSS级联规则与层叠上下文

CSS级联决定样式优先级，层叠上下文决定元素渲染层级，是CSS渲染机制的核心概念。

CSS级联规则

什么是级联

级联是CSS处理样式冲突的机制，决定最终应用哪个样式声明。

级联优先级顺序

按优先级从高到低：

1. 用户代理样式 + !important
2. 用户样式 + !important
3. 作者样式 + !important
4. 作者样式（正常）
5. 用户样式（正常）
6. 用户代理样式（默认）

级联层（@layer）

CSS Cascade Layers提供新的样式优先级控制方式。

/* 定义层级顺序 */
@layer base, components, overrides;

/* base层：最低优先级 */
@layer base {
  button {
    padding: 8px 16px;
    border-radius: 4px;
  }
}

/* components层：中等优先级 */
@layer components {
  .btn {
    padding: 12px 24px;
  }
}

/* overrides层：最高优先级 */
@layer overrides {
  .btn {
    padding: 16px 32px;
  }
}

层级优先级规则

/* 层级优先级 */
@layer low, medium, high;

/* 后声明层级优先级更高 */
/* high > medium > low */

/* 无层级样式优先级最高 */
button {
  padding: 10px;  /* 比所有层级都高 */
}

!important反转层级

@layer low, high;

@layer low {
  button {
    padding: 10px !important;  /* 低层!important优先级更高 */
  }
}

@layer high {
  button {
    padding: 20px !important;  /* 高层!important优先级较低 */
  }
}

/* 结果: padding: 10px（低层!important胜出） */

层叠上下文

什么是层叠上下文

层叠上下文是HTML元素的三维概念，决定元素在Z轴上的渲染顺序。

层叠上下文触发条件

层叠顺序

同一层叠上下文内的渲染顺序：

从后到前：
1. 层叠上下文背景和边框
2. z-index为负的子层叠上下文（从大到小）
3. 块级元素（非层叠上下文）
4. 浮动元素
5. 行内元素
6. z-index为0的子层叠上下文
7. z-index为正的子层叠上下文（从小到大）

层叠顺序示意图

┌─────────────────────────────────────┐
│  7. z-index > 0 (从小到大)          │ ← 最前
├─────────────────────────────────────┤
│  6. z-index = 0 / auto              │
├─────────────────────────────────────┤
│  5. inline-level元素                │
├─────────────────────────────────────┤
│  4. float元素                       │
├─────────────────────────────────────┤
│  3. block-level元素                 │
├─────────────────────────────────────┤
│  2. z-index < 0 (从大到小)          │
├─────────────────────────────────────┤
│  1. 层叠上下文背景/边框              │ ← 最后
└─────────────────────────────────────┘

层叠上下文特性

层级隔离

子元素的z-index只在父层叠上下文内生效。

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

/* 子元素z-index很高 */
.child {
  position: absolute;
  z-index: 9999;
}

/* 但child只在parent内部比较 */
/* parent的z-index=1决定了整体层级 */

示例分析

<div class="a">
  <div class="a-child" style="z-index: 999;"></div>
</div>
<div class="b" style="z-index: 2;"></div>

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

.a-child {
  position: absolute;
  z-index: 999;  /* 只在a内部生效 */
}

.b {
  position: relative;
  z-index: 2;  /* 层叠上下文 */
}

/* 渲染顺序：b(2) > a(1) > a-child(在a内部) */
/* a-child的z-index=999不会让它在b之上 */

z-index管理策略

分层z-index系统

/* 定义层级常量 */
:root {
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}

使用示例

.dropdown {
  z-index: var(--z-dropdown);
}

.modal {
  z-index: var(--z-modal);
}

.modal-backdrop {
  z-index: var(--z-modal-backdrop);
}

.tooltip {
  z-index: var(--z-tooltip);
}

避免层叠上下文陷阱

opacity陷阱

/* opacity < 1会创建层叠上下文 */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.5;  /* 创建层叠上下文 */
  z-index: 1;
}

.modal {
  position: fixed;
  z-index: 2;  /* 期望在backdrop之上 */
}

/* 问题：backdrop的opacity创建了层叠上下文 */
/* modal实际在backdrop的层叠上下文内 */
/* 可能导致modal被其他z-index=1的元素遮挡 */

transform陷阱

/* transform创建层叠上下文 */
.container {
  transform: translateZ(0);  /* 创建层叠上下文 */
  z-index: 1;
}

.popup {
  position: absolute;
  z-index: 999;  /* 只在container内有效 */
}

解决方案

/* 方法1：避免不必要的层叠上下文创建 */
.modal-backdrop {
  position: fixed;
  opacity: 1;  /* 使用rgba替代opacity */
  background: rgba(0, 0, 0, 0.5);
}

/* 方法2：将弹窗放在独立容器 */
.modal-wrapper {
  position: fixed;
  z-index: 500;
}

.modal-backdrop {
  z-index: 1;  /* 在wrapper内部 */
}

.modal {
  z-index: 2;  /* 在wrapper内部，高于backdrop */
}

isolation属性

创建隔离层叠上下文

.isolated {
  isolation: isolate;  /* 只创建层叠上下文 */
  /* 不影响其他CSS特性 */
}

使用场景

/* 防止z-index泄露 */
.cards-container {
  isolation: isolate;
}

.card {
  position: relative;
  z-index: 1;  /* 只在cards-container内生效 */
}

/* 其他元素不受card的z-index影响 */

级联与层叠上下文关系

概念区分

独立机制

/* 级联决定样式优先级 */
.button {
  z-index: 10;  /* 正常作者样式 */
}

.button {
  z-index: 20 !important;  /* 高优先级 */
}

/* 层叠上下文决定渲染层级 */
/* z-index值应用于层叠顺序计算 */

要点总结

1. 级联顺序：!important > 作者样式 > 用户样式 > 默认样式
2. @layer定义级联层，后声明层级优先级更高
3. !important反转层级优先级
4. 层叠上下文决定元素Z轴渲染顺序
5. 子元素z-index只在父层叠上下文内生效
6. opacity/transform/filter等创建层叠上下文
7. 使用isolation: isolate隔离层叠上下文
8. 建立统一的z-index层级管理系统