平面.png
什么是层叠上下文
层叠上下文，英文称作”stacking context”. 是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。
这里出现了一个名词-z轴，指的是什么呢？
z轴.png
一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。
层叠上下文.png
这是我们经常在页面上看见的模块布局 ,此时A和B就是层叠上上下文的关系
那什么是层叠等级 ?
层叠等级 指的又是什么？层叠等级(stacking level，叫“层叠级别”/“层叠水平”也行)
1.在同一个层叠上下文中，它描述定义的是该层叠上下文中的层叠上下文元素在Z轴上的上下顺序。
2.在其他普通元素中，它描述定义的是这些普通元素在Z轴上的上下顺序。
这个时候 是不是会有一些疑问 ? 层叠等级 和 层叠上下文有什么区别? 感觉很相似啊 🤔️
大家看下面这张图就肯定知道了
层叠等级.png
A 和 B 有层叠上上下文的关系 ——> 那么 A 中的 a 和 B 中的 b 就有层叠等级的关系——> a设置成 a-index:0 , b设置成 9999, a也在b的上面
所以我们得出:
1.普通元素的层叠等级优先由其所在的层叠上下文决定。
2.层叠等级的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠等级是没有意义的。
最后我们说一下层级顺序
“层叠顺序”(stacking order)表示元素发生层叠时按照特定的顺序规则在Z轴上垂直显示。由此可见，前面所说的“层叠上下文”和“层叠等级”是一种概念，而这里的“层叠顺序”是一种规则。
层叠顺序.png
如果我们需要比较判断元素 , 谁在上下时 ,请按照下面这样的顺序判断 :
1.首先先看要比较的两个元素是否处于同一个层叠上下文中
2.如果是，谁的层叠等级大，谁在上面（怎么判断层叠等级大小呢？——看“层叠顺序”图）
3.如果两个元素不在统一层叠上下文中，请先比较他们所处的层叠上下文的层叠等级
4.当两个元素层叠等级相同、层叠顺序相同时，在DOM结构中后面的元素层叠等级在前面元素之上。
