z-index属性，并说明如何形成层叠上下文

  z-index 是 CSS 属性，用于控制元素在垂直方向上的层叠顺序（堆叠顺序）。它决定了元素在层叠上下文中的显示顺序，具有较高 z-index 值的元素将覆盖具有较低 z-index 值的元素。

1. z-index 属性:

  通过设置 z-index 属性，可以为元素指定一个整数值（正数、负数或零），表示元素在层叠顺序中的级别。较高的 z-index 值表示元素位于更上层，较低的 z-index 值表示元素位于更下层。

1.1 语法

selector {
  z-index: value;
}

• selector：表示要应用 z-index 属性的元素的选择器。
• value：表示 z-index 的值，可以是整数、auto 或 inherit。整数值用于确定元素的层叠顺序，auto 表示使用父元素的层叠顺序，inherit 表示继承父元素的层叠顺序。

  需要注意的是，z-index 属性只在具有定位（position）属性的元素上生效。定位属性 (position) 可以是 relative、absolute、fixed 或 sticky。

1.2 示例

<div class="box box1">Box 1</div>
<div class="box box2">Box 2</div>

.box {
  position: relative;
  width: 200px;
  height: 200px;
}

.box1 {
  background-color: red;
  z-index: 2;
}

.box2 {
  background-color: blue;
  z-index: 1;
}

  在上述示例中，.box1 元素具有更高的 z-index 值（2），因此它将位于更上层，覆盖位于更下层的 .box2 元素。

  需要注意的是，z-index 属性只在同一层叠上下文中的元素之间起作用。如果两个元素属于不同的层叠上下文，那么 z-index 的值无法直接比较它们的层叠顺序。在这种情况下，需要考虑元素的层叠上下文关系来确定显示顺序。

2. 形成层叠上下文（Stacking Context）：

  层叠上下文是指具有一系列 CSS 属性和规则的元素，这些属性和规则定义了元素在垂直堆叠顺序中的行为。它们决定了元素如何相互叠放和覆盖。

  以下是一些常见形成层叠上下文的方式：

1. 根元素（HTML）：整个 HTML 文档的根元素是层叠上下文的起点。
2. 定位元素（position 属性为 relative、absolute、fixed 或 sticky 的元素）：定位元素会创建一个局部的层叠上下文。
3. Flexbox 容器（display 属性为 flex 或 inline-flex 的元素）：Flexbox 容器及其子元素形成层叠上下文。
4. Grid 容器（display 属性为 grid 或 inline-grid 的元素）：Grid 容器及其子元素形成层叠上下文。
5. < iframe > 元素：每个 < iframe > 元素都会创建一个独立的层叠上下文。
6. CSS 3D 变换（transform 属性为非 none 值的元素）：应用了 3D 变换的元素会形成层叠上下文。

  层叠上下文中的元素会与其兄弟元素和后代元素形成独立的层叠顺序。因此，即使一个元素的 z-index 值较低，但它位于层叠上下文中，仍然可以覆盖在位于层叠上下文外的元素上。

  通过创建或修改元素的 CSS 属性和规则，可以形成层叠上下文，并控制元素在垂直堆叠顺序中的显示方式。