10分钟理解层叠上下文和层叠水平

参考<<CSS世界>>：https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/

什么是层叠上下文

层叠上下文（stacking context）是html中的一个三维概念。如果一个元素含有层叠上下文，我们可以理解成这个元素在Z轴上就“高人一等”。z轴，表示的是用户与显示器之间这条看不见的垂直线。与BFC类似，我们可以把层叠上下文理解成一种“层叠结界”，自成一个小世界。

什么是层叠水平

层叠水平（stacking level）决定了同一个层叠上下文中元素在z轴上的显示顺序。所有的元素都有层叠水平，包括层叠上下文元素，也包括普通元素。然鹅对应普通元素的层叠水平讨论只局限在当前的层叠上下文元素中，因为，普通元素的层叠水平无法突破层叠上下文这个结界去和结界外的元素较量。
层叠水平和css的z-index属性不能混为一谈，尽管某些情况下z-index的确可以影响层叠水平，但只限于定位元素以及flex盒子的孩子元素，而层叠水平所有元素都存在。

什么是层叠顺序

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

image.png

如图，可以想象一下装修房子，先要整平墙面，然后布局水电线路，最后装饰。

层叠准则

当元素发生层叠时，其覆盖关系遵守下面两条准则：
1、谁大谁上：当具有明显的层叠水平标识时，如生效的z-index属性，在同一个层叠上下文，层叠水平值大的覆盖小的。
2、后来居上：当元素的层叠水平一致、层叠水平相同的时候，在dom流中处于后面的覆盖前面的元素。

层叠上下文的创建

1、天生派：页面根元素天生具有层叠上下文，称为根层叠上下文，即<html>元素.
2、正统派： z-index值为数值的定位元素的传统“层叠上下文”
3、扩招派：其他css属性。如元素的opacity值不为1，元素的transform值不为none等。

根层叠上下文
指的是页面根元素，也就是滚动条的默认的始作俑者<html>元素。这就是为什么，绝对定位元素在left/top等值定位的时候，如果没有其他定位元素限制，会相对浏览器窗口定位的原因。

定位元素与传统层叠上下文
对于包含有position:relative/position:absolute的定位元素，以及FireFox/IE浏览器下含有position:fixed声明的定位元素，当其z-index值不是auto的时候，会创建层叠上下文。注意：Chrome等webkit内核浏览器，position:fixed元素天然层叠上下文元素，无需z-index为数值。