CSS z-index 属性

什么是z-index属性？

CSS中的z-index属性用于控制层叠上下文（stacking context）中元素的垂直排列顺序。它可以用来决定哪个元素在其他元素的上方或下方。z-index是正整数，它的值越大，则元素在层叠上下文中越靠近顶部。

如何使用z-index属性？

可以通过以下步骤来设置z-index属性：

选择要设置z-index属性的元素。
在CSS中输入“z-index: value”语句，其中value是一个正整数值。

举个例子，如下所示：

#example {
  z-index: 10;
}

这段代码将元素“example”的z-index属性设置为10。如果页面中有其他元素的z-index值小于10，则“example”元素将显示在它们的上方。

层叠顺序

元素的层叠顺序是由以下因素决定的：

元素的z-index值，值越大越靠近顶部。
元素的位置，靠后的元素会覆盖在前面的元素之上。
元素的属性，如opacity或transform属性，可能会改变元素的层叠顺序。

如果两个元素有相同的z-index值，靠后的元素会覆盖在前面的元素之上。

z-index的取值范围

z-index属性的取值范围是从负整数到最大可能的正整数。但需要注意的是，如果给定一个非整数值，浏览器仍会自动将其转换为整数值。

z-index与父元素的关系

z-index属性只有在同一层叠上下文中才会生效。如果元素的父元素没有设置z-index值，则子元素的z-index值默认为父元素的z-index值。如果子元素的z-index值大于父元素的z-index值，则子元素将显示在父元素的上方。

层叠上下文

层叠上下文是一种层叠的三维概念，每个层叠上下文都形成一个独立的层叠层次。一般来说，每个包含确定布局和绘制元素的DOM容器都会创建一个层叠上下文。

一个元素可以成为层叠上下文，它有以下几个条件：

根元素是一个层叠上下文。
元素具有 position: absolute / relative / fixed。
元素具有 opacity 属性。
元素具有 transform 或 filter 属性。
元素具有 mix-blend-mode 或 isolation 属性，并且 z-index值不为 auto。
元素具有 background-blend-mode 属性，并且 z-index值不为 auto。
元素具有任何一个 CSS 剪裁功能（clip-path、mask、mask-image、mask-border）并且 z-index值不为 auto。
元素具有 -webkit-overflow-scrolling 属性，并且 z-index值不为 auto。

总结

z-index属性可以控制元素在层叠上下文中的垂直排列顺序。取值范围是从负整数到最大可能的正整数。在层叠上下文中，z-index的值越大，则元素在层叠上下文中越靠近顶部。同时，z-index属性只有在同一层叠上下文中才会生效。需要注意的是，设置z-index值要谨慎，过多的使用可能导致页面混乱冗杂，增加维护难度。

CSS writing-mode 属性 CSS 函数