层叠上下文(stacking context)是一种三维概念，如果用户和电脑屏幕之间存在一条看不见的垂直线，假设一个元素含有层叠上下文的话，那么这个元素就会在这个垂直线上比其它元素“高人一等”。
层叠水平(stacking level)决定了同一个层叠上下文中元素在z轴上的显示顺序。所有的元素都有层叠水平，包括层叠上下文元素，普通元素的层叠水平优先由层叠上下文决定。注意不要把层叠水平和z-index属性混为一谈，z-index确实可以影响层叠水平，但是，只限于定位元素以及flex盒子的孩子元素；而层叠水平所有的元素都存在。
层叠顺序(stacking order)表示元素发生层叠时特定的垂直显示顺序。
层叠上下文的创建
- 文档根元素（
<html>）； -
position值为absolute（绝对定位）或relative（相对定位）且z-index值不为auto的元素； -
position值为fixed（固定定位）或sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）； - flex (
flexbox) 容器的子元素，且z-index值不为auto； - grid (
grid) 容器的子元素，且z-index值不为auto； -
opacity属性值小于1的元素 -
mix-blend-mode属性值不为normal的元素； - 以下任意属性值不为
none的元素： -
isolation属性值为isolate的元素； -
-webkit-overflow-scrolling属性值为touch的元素； -
will-change值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素 -
contain属性值为layout、paint或包含它们其中之一的合成值（比如contain: strict、contain: content）的元素。
层叠顺序
1.background
2.border
3.块级
4.浮动
5.内联
6.z-index: 0
7.z-index: +
可能会发现上面给出的顺序是没有z-index为负的情况，这是因为z-index为负时，其层叠顺序不一定是固定的。后面我们会说的，现在我们就来一一验证这个顺序，毕竟理解永远比死记硬背要好的多。
1.background与border(针对单个元素本身而言)
我们可以明显的看出，红色边框的后面透着黑色，那么证明background是在border后面的。
2.内联元素
可以看出我们的内联元素是在border上面的。
3.块级元素
可以看出类名为child的块级元素并没有覆盖文字，证明块级元素的层叠顺序是在内联元素下面的。
这里我们发现，child的文字覆盖了parent的文字，说明在文档流中，如果是相同的元素或者文字，那么后出现就会盖住前面的。
4.浮动元素
可以看出，浮动元素是在块级元素上面的，但是我们发现浮动元素并没有盖住内联元素，说明浮动元素是出于内联元素之下，块级元素之上的。这里还有一个现象，就是浮动元素的文字也是在parent文字下面，这是因为，浮动元素本身就比内联元素低。
5.定位元素(z-index为0或者auto)
我们发现两个现象，一是定位元素是在浮动元素和内联元素的上面，而是相同的元素，后出现的元素会覆盖前面的元素。
6.定位元素(z-index大于0)
当我们改变前一个定位元素的z-index的值，使其大于后一个定位元素的值，那么我们发现前一个元素会覆盖后一个元素。
7.z-index为负
（1）当父元素没有被定位时：
z-index的值为负时，其元素还在background下面。
（2）当父元素被定位时：
z-index的值为负时，其元素在块级元素和border中间。
总结说明
1.在层叠上下文中，子元素也会发生层叠上下文，但是子元素的z-index的值只在其父元素内起作用。
2.在同一个层叠上下文中，层叠水平值大的那一个覆盖小的那一个。
3.当元素的层叠顺序和层叠水平一样时，后出现的元素会覆盖前面的元素。
