mdn上定义:层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸，HTML元素依据其自身属性按照优先级顺序占用层叠上下文的空间。
元素显示的优先级:
background > border > 块级元素（若是有背景色，会盖住前面的背景色，因为后出现的。同级块级元素后出现盖住先出现的。） > 浮动元素（浮动元素里的文字小于内联元素里的文字） > 内联元素（inline-block属于内联元素） > 相对定位元素(z-index为0或auto) > z-index大于0
优先级
z-index为负数有两种情况,（1）父元素没有定位，负z-index在最下面（背景的后面）（2）父元素被定位，且不是auto，如设置为0，那么负的z-index就会出现在border的上面，div块级元素的下面。
只有被定位的元素才能变高（加z-Index），什么是定位元素昵？那就是position不是static（不是默认值）。所有元素的默认position都是static（默认值）。相对定位的z-index的值默认为auto，也可以理解为是0（但是不是0），在其它被定位元素上加z-index设置为1,那么优先级就会高于之前的auto。z-index值相同，后盖住前，值越大优先级越高。（适用于相对定位和绝对定位）。因此不管是相对定位还是绝对定位，只看z-index来决定层叠关系。
同级被定位的元素，z-index相同，下面的会覆盖上面的元素（B覆盖A）。A和B里面包裹的元素如是也被定位，但是不管A里面被定位的元素的z-index有多大，也没有B里面的z-index的优先级高，因为B始终在A的上面，B里面被定为元素再小，也会盖住A里面的被定为的元素。这就是堆叠上下文的比喻概念。这也是出现有的z-index很大，但是在别的元素的下面，这就是因为堆叠上下文和堆叠顺序了。
也可以说是堆叠上下文像是成立了一个部门，部分之间分高低贵贱，在高贵的部门里即使是最小的成员也瞧不起低等部门最大的人。
当你发现一个负z-index，想让他沉下去，但是沉不下去，这是因为层叠上下文的问题，部门过于高贵。
