请描述一下网页的层叠等级(z-index)？

网页的层叠等级 (z-index) 决定了重叠元素在 Z 轴上的堆叠顺序。值越大，元素越靠近用户，也就是越在上面。理解 z-index 的关键在于 层叠上下文 (stacking context) 的概念。

以下是 z-index 的一些关键特性：

• 数值: z-index 接受整数作为值，可以是正数、负数或零。数值越大，层叠顺序越高。

• 层叠上下文: z-index 仅在同一个层叠上下文中生效。 不同层叠上下文的元素，即使 z-index 值不同，也可能不会按照预期的顺序堆叠。这是理解 z-index 最容易出错的地方。

• 创建层叠上下文: 以下几种情况会创建新的层叠上下文：

  • 根元素 (html)
  • position 值为 absolute、relative 或 fixed 的元素，并且 z-index 值不为 auto
  • position 值为 sticky 或 fixed-top 或 fixed-bottom 的元素
  • opacity 值小于 1 的元素
  • transform、filter、perspective、clip-path、mask / mask-image 或 mask-border 值不为 none 的元素
  • isolation: isolate 的元素
  • will-change 指定了任何层叠上下文创建属性的元素
  • contain: layout、paint 或 strict 的元素
  • mix-blend-mode 值不为 normal 的元素
  • filter: blur()
  • backdrop-filter: blur()

• auto 值: z-index: auto 表示该元素不会创建新的层叠上下文。它的层叠等级由父元素继承。如果父元素也没有设置 z-index，则继续向上继承，直到根元素。

• 层叠顺序 within a stacking context: 在一个层叠上下文中，元素的堆叠顺序遵循以下规则：

  1. 背景和边框: 元素的背景和边框首先绘制。
  2. 负 z-index: 层叠上下文内 z-index 为负值的子元素。
  3. 块级元素: 正常的块级元素，没有定位，按文档流顺序排列。
  4. 浮动元素: 浮动的元素。
  5. 内联元素: 内联元素，按文档流顺序排列。
  6. z-index: auto 或 0: z-index 值为 auto 或 0 的定位元素。
  7. 正 z-index: 层叠上下文内 z-index 为正值的子元素，值越大，层叠顺序越高。

示例：

假设有两个 div，div1 和 div2，它们都设置了 position: absolute。

• 如果 div1 的 z-index 为 1，div2 的 z-index 为 2，那么 div2 会覆盖 div1。
• 如果 div1 的 z-index 为 1，div2 没有设置 z-index，那么 div1 会覆盖 div2，因为 div1 创建了新的层叠上下文。
• 如果 div1 和 div2 都没有设置 z-index，或者都设置为 auto，那么它们按照在 HTML 中出现的顺序堆叠，后出现的覆盖先出现的。

理解层叠上下文是正确使用 z-index 的关键。 如果遇到 z-index “失效”的情况，很可能是因为层叠上下文的关系。 建议使用开发者工具检查元素的层叠上下文，以便更好地理解元素的堆叠顺序。