描述 z-index 以及如何在 CSS 中形成堆叠上下文

什么是 z-index

z-index 是 CSS 中用于控制元素堆叠顺序的属性，它的值可以为正整数、负整数或 auto。值越大的元素，越靠近用户。

如何在 CSS 中形成堆叠上下文

在 CSS 中形成堆叠上下文非常简单，只需给元素设置以下属性之一即可：

• position: absolute/fixed/relative/sticky;
• transform/opacity/filter；
• mix-blend-mode/bacground-blend-mode；
• will-change: transform/opacity/filter/anything else；
• isolation: isolate；
• filter；
• perspective；
• clip-path；
• mask/mask-image/mask-border。

这些属性可以让元素形成一个新的层级，这个层级内部的元素互相叠加并且不会影响其他层级的元素。

下面是一个示例代码，其中一个元素通过设置 position: relative 形成了一个新的层级：

<div style="z-index: 1; position: relative;">
  I am on top!
  <div style="z-index: -1; position: absolute; top: 0; left: 0;">
    I am behind!
  </div>
</div>

在这个例子中，第一个 div 元素形成了一个新的层级，因此它的子元素可以叠加在该层级内而不影响其他元素。在子元素中，z-index 值为 -1，因此它处于父元素下面。

总结

在 CSS 中形成堆叠上下文可以帮助我们更好地控制页面元素的堆叠顺序。z-index 是这个过程中最重要的属性之一，我们可以通过将元素置于一个新的层级中，从而使其不影响其他元素的显示。