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 的了解情况
<section> <article>1</article> <article>2</article> <article>3</article> <article>4</article> </section>
默认情况下,哪篇报道显示在顶部?
如果 Z-index 不起作用,您应检查元素的什么属性?
position
relative
display
animation
Flexbox 和网格是否需要 position: relative
?