什么是层叠上下文？

层叠上下文是 CSS 中的概念，用于确定网页元素在垂直方向上的叠加顺序。理解它有助于解决复杂的布局问题。

CSS 中等 布局 层叠上下文 Z-index

层叠上下文 (stacking context) 是 CSS 中的一种三维组织模型，描述了网页元素在垂直 Z 轴上的叠加顺序，即哪些元素会在不同层级上覆盖或叠加。这确保了在页面布局中发生重叠时，元素的渲染层次符合开发者预期。

层叠上下文的核心特征包括：

  • 空间定位：元素相对于浏览器视窗按优先级占据三维空间。
  • 独立性：每个新层叠上下文是隔离的上下文容器，它仅对其内部元素层级排列产生影响。

层叠上下文的形成条件

以下情况将创建一个新层叠上下文：

  1. 文档根元素：<html>元素自动创建根层叠上下文。
  2. 定位元素：
    • position: absolute 或 position: relative，且 z-index 值不为 auto。 例如： 
      .element {
  position: relative;
  z-index: 1; /* 创建新层叠上下文 */
}
    • position: fixed 或 position: sticky（无需 z-index）。
  3. CSS3属性：
    • opacity 值小于 1。
    • transform 值不为 none。
    • filter 值不为 none。
    • isolation: isolate。
  4. Flex或Grid子元素：在 display: flex 或 display: grid 容器中，子元素的 z-index 不为 auto。

层叠等级的排列规则

在同一个层叠上下文中，层级堆叠遵循从低到高的顺序：

  1. 背景和边框：底层叠上下文的边界元素。
  2. 负 z-index 元素：例如 z-index: -1。
  3. 块级元素：处于普通文档流的非定位块状元素。
  4. 浮动元素：如 float: left|right。
  5. 行内元素：普通文档流中的内联元素。
  6. 零 z-index 元素：如 z-index: 0。
  7. 正 z-index 元素：如 z-index: 1 及以上。 当层级冲突时（同一级别），元素按 DOM 结构顺序渲染（后面的优先）。

应用场景

掌握层叠上下文可用于解决布局问题，如弹出式模态框应覆盖在内容上方 (高 z-index) 或不透明白 opacity<1 导致其子元素强制隔离渲染。