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-elementz-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 和一个非 autoz-index 值, 它创建了一个新的堆栈上下文。 这意味着,即使您将 .childz-index 设为 -999, 它仍然不会排在 .my-parent 后面。

堆叠上下文

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

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

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

创建堆叠上下文

您无需应用 z-indexposition 即可创建新的 堆栈上下文。 您可以为用于创建新复合层的属性添加值,从而创建新的堆叠上下文 例如 opacitywill-changetransform。 您可以 点击此处,查看完整的房源列表

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

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

资源

检查您的理解情况

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

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

默认情况下,哪篇报道显示在顶部?

3
1
4
2

如果 Z-index 不起作用,您应检查元素的什么属性?

position
relative
animation
display

Flexbox 和网格是否需要 position: relative