深入理解z-index的工作原理和应用技巧

前言

最近参与某前端项目架构改造时，发现项目中滥用z-index的现象相当普遍——设置的值动辄几十种，而且完全不统一。在对项目的z-index进行梳理和统一的过程中，也顺带深入学习了这个属性，于是整理成文，希望能帮到有同样困惑的开发者。

1、z-index

到底什么是z-index？MDN的解释是：z-index属性设定了一个定位元素及其后代元素（或flex项目）的z-order。当元素之间发生重叠时，z-index较大的元素会覆盖较小的元素，显示在上层。

从这个定义可以看出，z-index生效的对象是定位元素，也就是position属性值不为static的元素。对于重叠的元素，要怎么管理顺序、解决展示冲突？通常我们第一时间想到的就是z-index。CSS允许我们对z-index设置三种值：

• auto（自动，默认值）
• 整数
• inherit（继承）

在判断元素层叠时，需要牢记两个准则：

• 谁大谁上：在同一层叠上下文中，z-index值越大，盒子在层叠中的次序就越靠近用户的眼睛。
• 后来居上：在同一层叠上下文中，当元素层叠顺序相同（z-index一致），DOM流中处于后面的元素会覆盖前面的元素。

  
one
  
two

当都设置了z-index时，值较大的元素会掩盖较小的那个：

div { position: relative; }
.one { z-index: 2; }
.two { z-index: 1; }

不过，上面的准则都有一个前提——在同一层叠上下文中。那么，什么是层叠上下文？它又是怎么产生的？

2、层叠上下文

MDN的定义是：层叠上下文（stacking context），是HTML的一个三维概念。页面元素基于层叠上下文来进行顺序的排列。层叠上下文在z轴上形成一个类似“作用域”的空间，一个层叠上下文内的所有元素，不管怎么设置z-index，都被限制在这个上下文内。需要注意：元素的层叠上下文不一定是它的父元素。

每个网页都有一个默认的层叠上下文，其根元素就是html标签。html中的一切都被置于这个默认的层叠上下文的某一层上（body）。当一个元素创建了层叠上下文，它的所有子元素都会受到父层叠顺序的影响。这意味着，如果某个层叠上下文本来就处在最低层，那么它的子元素z-index设得再大，也跑不到其他层叠上下文元素上面去。

读到这里，你大概明白了——为什么很多时候我们对定位元素设置了z-index，却无论如何都掩盖不住另一个元素？原因就在这里。

3、层叠水平

“层叠水平”，英文是“stacking level”，它决定了同一个层叠上下文中元素在z轴上的显示顺序。换句话说，在同一层叠上下文里，不同元素重叠时，显示顺序遵循层叠水平的规则，而z-index可以影响元素的层叠水平。

需要再次强调：讨论层叠水平排序时，必须限制在单个层叠上下文内。层叠水平不等于z-index属性——所有元素都存在层叠水平，但z-index只能改变定位元素及flex盒子的子元素的层叠水平。

4、层叠顺序

接下来聊聊层叠顺序。“层叠顺序”，英文是“stacking order”，指的是元素发生层叠时，有着特定的垂直显示顺序。注意，层叠上下文和层叠水平是概念，而层叠顺序是规则。

在一个层叠上下文中，按照层叠顺序，元素被分为7种层叠水平，默认的层叠顺序如下图所示：

1. 背景和边框——形成层叠上下文元素的背景和边框，位于层叠上下文的最底层。
2. 负z-index——层叠上下文内，z-index值为负的定位元素。
3. 块级盒子——层叠上下文中，非行内非定位元素。
4. 浮动盒子——非定位浮动元素。
5. 行内/行内块盒子——层叠上下文中，inline和inline-block非定位元素。
6. z-index:0 / auto——定位元素。单纯看层叠水平，两者表现一样，但对层叠上下文的影响不同。
7. 正z-index值——定位元素，值越大越靠近用户。

在平时开发中，我们经常打交道的是第2、6、7层，大部分元素的层叠水平都低于z-index为0的定位元素。

这里顺便提一个问题：如果只给one元素设置position: relative，能否让one盖在上面？——设置position后，z-index: auto会自动生效，答案是肯定的。

问题来了：为什么inline/inline-block元素的层叠顺序比浮动元素和块元素都高？

其实道理很简单：border/background是装饰属性，浮动和块元素主要用于布局，而内联元素承载的是内容。网页中，内容最重要，所以内容的层叠顺序更高——当发生层叠时，文字和图片这些重要内容应优先暴露在屏幕上。

5、创建层叠上下文

层叠上下文元素有几个特性：

• 层叠上下文可以嵌套，内部的层叠上下文及其所有子元素都受制于外部的层叠上下文。
• 每个层叠上下文与兄弟元素独立，层叠变化或渲染时，只需考虑后代元素。
• 每个层叠上下文自成体系，当元素发生层叠时，整个元素被视为父层叠上下文中的一个层叠单元。

那么，创建层叠上下文的条件有哪些？根据MDN，满足以下任一条件即可：

• 文档根元素（html），生成根层叠上下文，包裹在所有元素的最外层。
• position值为absolute或relative，且z-index不为auto的元素。
• position值为fixed或sticky的元素。
• z-index不为auto的所有flex容器的子元素。
• z-index不为auto的所有grid容器的子元素。
• opacity属性值小于1的元素。
• mix-blend-mode属性值不为normal的元素。
• 任一属性值不为none的元素：transform、filter、backdrop-filter、perspective、clip-path、mask、mask-image、mask-border。
• isolation属性值为isolate的元素。
• will-change值设定了某一属性，且该属性在non-initial值时会创建层叠上下文的元素。
• -webkit-overflow-scrolling属性值为touch的元素。
• contain属性值为layout、paint或包含它们其中之一的合成值（如contain: strict、contain: content）的元素。

在层叠上下文中，子元素同样按照上述规则进行层叠。重要的是，子级层叠上下文的z-index值只在父级中才有意义——子级层叠上下文被自动视为父级层叠上下文的一个独立单元。

接下来用一个示例说明flex属性对层叠上下文的影响。代码中，two元素与图片有相同的层叠上下文，z-index为负值。

  

    {/* 普通元素，z-index不生效 */}
    
  

此时，two块元素和img元素有相同的层叠上下文，z-index为负的图片在块元素之下。现在，给one元素设置display: flex：

设置flex后，图片跑到上面来了。原因是：设置flex后，two元素创建了一个层叠上下文，成为图片的父层叠上下文，而背景的层叠顺序低于负z-index的img元素。

小结

这篇文章从z-index出发，聊了层叠上下文、层叠顺序，说明了元素在什么条件下会创建层叠上下文，并用flex属性举例说明了它如何影响层叠水平。希望能帮你理解层叠上下文和层叠水平这两个概念。由于水平有限，难免有疏漏，如有不当之处，欢迎指正。