1. 铺垫

首先要明白的是，层叠上下文是与z-index并行的一对概念。明白这一点，也就可以明白一多半z-index是做什么用的了。

然后，要理解层叠上下文，还需要一个前置知识：CSS 3D transformations^[3]，即CSS 3D模型。我们看到的网页是二维界面，在刚开始理解CSS的时候也是二维思维。那么三维思维是怎样引入的呢？在《The book of CSS3》中，作者这样说到：

In CSS, the z-axis is based on the viewer: If you think of the x-axis as left to right and the y-axis as up and down, then think of the z-axis as toward and away. When you move an element along the z-axis by a positive value, you move it toward yourself; likewise, moving it by a negative value moves it away from you.

翻译一下：

在CSS中，z轴是基于视角的：如果你认为x轴意味着从左到右，y轴指的是从上到下，那么z轴就可以看成是离视角的距离远近。当你将元素向沿着z轴正极(z > 0)移动时，你将元素移到朝向你自己的地方；当你向副极(z < 0)移动时，你将其推离你自己。

2. 概念：什么是层叠上下文

层叠上下文(the stacking context)正是基于CSS 3D概念提出的，层叠上下文就是元素沿着这条z轴一字排开。再通俗点说，想像一下烤串上一个又一个肉块的堆叠，z轴是签子，元素是肉块。上图:

3. 哪些元素适用于层叠上下文

某些元素的渲染顺序可以由z-index值来决定，通常来说值越大越靠近用户，就像上图烤肉机一样，肉皮总是放在最上面烤。

一般情况下，z-index越高，层级越大。但有例外。例如，父元素的z-index值为5，然而与父元素平级的叔叔元素z-index值为6，即使子元素的z-index值为9999，子元素也不会被先渲染。

哪些元素可以用于构造层叠上下文呢^[1][2]？

• 根元素html
• position值为absolute(绝对定位)或relative(相对定位)，并且z-index != auto
• position值为fixed（固定定位）或sticky（粘滞定位），z-index随意
• flex布局或grid布局的元素，但z-index != auto
• opacity（透明度）小于1的元素
• 具有mix-blend-mode值的元素，但值不能等于normal
• 具有如下属性的元素，只要值不为none即可：
  • transform
  • filter
  • perspective
  • clip-path
  • mask / mask-image / mask-border
• isolation值为isolate的元素
• -webkit-overflow-scrolling 属性值为 touch 的元素
• will-change值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素
• contain属性值为layout、paint或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。

3. 示例

未完待续。

References

• [1] Mozilla官方文档(English)
• [2] Mozilla官方文档(中文)
• [3] The Book of CSS3
• [4] 杭州饥人谷
• [5] 张鑫旭-深入理解CSS中的层叠上下文和层叠顺序