一文梳理z-index和层叠上下文
前言
最近参与某前端项目架构改造，发现项目中滥用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流中处于后面的元素会覆盖前面的元素。
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>
当都设置z-index属性时，拥有较大z-index值的元素会掩盖住小的那个元素：
div {
position: relative;
}
.one {
z-index:2;
}
.two {
z-index:1;
}
上面的准则都是在说同一层叠上下文，那么什么是层叠上下文呢？层叠上下文是何时产生的呢？
2、层叠上下文
The stacking context is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes. -- MDN
层叠上下文（stacking context），是HTML的一个三维的概念。页面元素基于层叠上下文来进行顺序的排列。层叠上下文在z轴上形成一个类似作用域的空间，一个层叠上下文内的所有元素不管如何设置z-index，都被限制在该层叠上下文内。需要注意：元素的层叠上下文不一定是该元素的父元素。
每个网页都有一个默认的层叠上下文，这个层叠上下文的根元素就是html元素。html标签中的一切都被置于这个默认的层叠上下文的一个层叠层上（body）。当一个元素创建一个层叠上下文时，它的所有子元素都会受到父元素的层叠顺序影响。这意味着如果一个层叠上下文位于一个最低位置的层，那么其子元素的z-index设置得再大，它都不会出现在其他层叠上下文元素的上面。
阅读到这里，想必你总算知道了为什么很多时候我们对定位元素设置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值 -- 定位元素。z-index值越大，越靠近用户。
在平时开发时，我们经常会使用（2）、（6）、（7），大部分元素的层叠水平都低于z-index为0的定位元素。
这里顺便基于上文的实验提出一个问题，如果只给one元素设置position的relative，能否实现one元素在上面？（设置postition后，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为负值。
<div class="one">
<div class="two" style={{backgroundColor: "blue", zIndex: "1"}}> {/* 普通元素，z-index不生效 */}
<img src='./imgs/38558887.jpeg' style={{position: "relative", zIndex: "-1"}} />
</div>
</div>
two块元素和img元素有相同的层叠上下文，z-index值为负的图片在块元素之下。现在，我们给one元素设置display属性值为flex：
<div class="one" style={{display: "flex"}}>
<div class="two" style={{backgroundColor: "blue", zIndex: "1"}}>
<img src={img} style={{position: "relative", zIndex: "-1", height:"60px"}} />
</div>
</div>
当设置父元素flex属性后，图片跑到上方来了。这是因为设置flex属性后two元素创建了一个层叠上下文，包裹图片成为图片的父层叠上下文，背景的层叠顺序低于负z-index值的img元素。
小结
本文从z-index出发，介绍了层叠上下文、层叠顺序，并简要阐述了元素在什么条件会产生层叠上下文，同时举例说明了flex属性如何影响层叠水平。希望能够帮助你理解层叠上下文和层叠水平，由于作者水平有限，难免行文有误，如有不当请不吝指教，谢谢！
ps: 这里安利两个看z-index和层叠上下文的chrom插件：z-index | z-context