Z-index 和堆叠上下文

CSS 播客 - 019：Z-index 和堆叠上下文

假设你有一些绝对定位的元素， 并且应该相互叠加 您可能会编写如下一些 HTML：

<div class="stacked-items">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
</div>

但是，默认情况下，哪一个层会叠放在另一个上呢？ 要想知道哪个项目会执行这项操作 您需要了解 Z-index 和堆叠上下文

Z-index

z-index 属性可基于浏览器的 3D 空间（Z 轴）明确设置 HTML 的图层顺序。 这条轴显示哪些图层离您更近，哪些图层离您更远。 网站上的纵轴是 Y 轴，横轴是 X 轴。

z-index 属性接受的数值可以是正数，也可以是负数。 如果元素的 z-index 值更高，它们将会出现在另一个元素之前。 如果未在元素上设置 z-index 那么默认行为是文档来源顺序决定 Z 轴。 这意味着，文档中更靠下的元素会位于其前面的元素之上。

在正常流程中 如果您为 z-index 设置了具体的值，但这不起作用， 您需要将该元素的 position 值设置为 static 以外的任何值。 在这个地方，人们经常会遇到z-index。

不过，在 Flexbox 或网格环境中，情况就不是这样。 因为您无需添加 position: relative 即可修改 Flex 项或网格项的 Z-index。

Z-index 值为负

要将某个元素设置为另一个元素之后，请执行以下操作： 为 z-index 添加负值。

.my-element {
    background: rgb(232 240 254 / 0.4);
}

.my-element .child {
    position: relative;
    z-index: -1;
}

只要 .my-element 的 z-index 的初始值为 auto， .child 元素位于它后面。

将以下 CSS 添加到 .my-element， 并且 .child 元素不会位于其后面。

.my-element {
  position: relative;
  z-index: 0;
  background: rgb(232 240 254 / 0.4);
}

因为 .my-element 现在有一个 position 值，但不是 static 和一个非 auto 的 z-index 值， 它创建了一个新的堆栈上下文。 这意味着，即使您将 .child 的 z-index 设为 -999， 它仍然不会排在 .my-parent 后面。

堆叠上下文

堆叠上下文是一组具有共同父项的元素，它们可以一起沿 z 轴上下移动。

在此示例中 第一个父元素的 z-index 为 1， 因此会创建新的堆叠上下文 其子元素的 z-index 为 999。 在此父元素旁边，还有一个父元素，它有一个子元素。 父元素的 z-index 为 2，子元素的 z-index 也为 2。 由于两个父级均创建一个堆叠上下文， 所有子级的 z-index 都以其父级的为准。

堆叠上下文中元素的 z-index 始终相对于父项在其堆叠上下文中的当前顺序。

创建堆叠上下文

您无需应用 z-index 和 position 即可创建新的 堆栈上下文。 您可以为用于创建新复合层的属性添加值，从而创建新的堆叠上下文 例如 opacity、will-change 和 transform。 您可以 点击此处，查看完整的房源列表。

为了解释什么是复合层，可以把网页想象成画布。 浏览器会获取您的 HTML 和 CSS，并使用它们来确定画布的大小。 然后，它会在此画布上绘制页面。 如果某个元素要改变，例如 它改变了位置，然后浏览器必须返回并重新确定要绘制的内容。

为了帮助您提升性能 浏览器会创建新的复合层，这些层会叠加在画布之上。 这些有点像便笺： 移动一个画布并进行更改，不会对整体画布产生巨大影响。 系统会为包含 opacity 的元素创建新的复合层， transform和will-change，因为它们很可能会发生变化， 因此浏览器会使用 GPU 来应用样式调整，以确保更改尽可能高效。

资源

• 强制使用层
• 动画指南：强制创建层
• 了解 Z-index

检查您的理解情况

测试您对 Z-index 的了解情况

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>