CSS层叠相关的理解

     参考张鑫旭慕课网CSS的z-index课程，链接为：https://www.imooc.com/learn/643

1.几个概念

z轴：指的是用户的眼睛与屏幕之间的垂直的轴线，表征了屏幕与用户眼睛之间的距离远近。这里我们一般认为用户的眼睛位置不动，因此通过让页面上的元素成为“层叠上下文元素”来拉近其与用户的距离。

层叠上下文（stacking context）：HTML元素中的三维概念，能够创建层叠上下文的元素也被称为层叠上下文元素，层叠上下文元素相比于非层叠上下文元素距离用户眼睛要更近。

能够创建层叠上下文的元素有以下几种：

1. 根元素：根元素层叠上下文；
2. z-index为<integer>的定位元素（position:relative/absolute/fixed/sticky）；
3. 不依赖z-index，利用其它属性实现。

层叠水平（stacking level）：层叠上下文中的每个元素都有一个层叠水平，层叠水平决定了同一个层叠上下文中元素在z轴上的显式顺序。层叠水平不能脱离与层叠上下文独立存在，必须在同一个层叠上下文中的元素进行层叠水平的判断才有意义。遵循“后来居上”和“谁大谁上”，以及七层层叠水平模型。

完整的七层层叠水平如下：

层叠顺序（stacking order）：元素发生层叠时候有着特定的垂直显示顺序。

判断的相关规则为：

1. 依赖z-index的层叠上下文元素的层叠顺序均是z-index:auto级别；依赖z-index的层叠上下文元素的层叠顺序取决于z-index值。依赖z-index值创建层叠上下文有两种情况：①position为relative/absolute/fixed（部分浏览器）；②display:flex|inline-flex容器的子flex项。
2. 层叠水平的判断要在相同的层叠上下文中才有意义。如果两个元素处于同一个层叠上下文，或者其中一个元素是另一个元素的层叠上下文元素，那么按照七层层叠水平模型判断即可。如果两个带判断的元素处于不同的层叠上下文，那么尽可能小地向上寻找元素的层叠上下文元素，直到处于相同的层叠上下文，再比较。
3. z-index:auto不创建层叠上下文，z-index:0创建层叠上下文。
4. 如果根据以上规则无法判断，那么要记得考虑“后来居上”，即DOM结构中后定义的元素的层叠顺序高。