mdn上定義:層疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相對于面向（電腦屏幕的）視窗或者網(wǎng)頁的用戶的z軸上延伸，HTML元素依據(jù)其自身屬性按照優(yōu)先級順序占用層疊上下文的空間。

元素顯示的優(yōu)先級:
background > border > 塊級元素（若是有背景色，會蓋住前面的背景色，因為后出現(xiàn)的。同級塊級元素后出現(xiàn)蓋住先出現(xiàn)的。） > 浮動元素（浮動元素里的文字小于內(nèi)聯(lián)元素里的文字） > 內(nèi)聯(lián)元素（inline-block屬于內(nèi)聯(lián)元素） > 相對定位元素(z-index為0或auto) > z-index大于0

優(yōu)先級

z-index為負(fù)數(shù)有兩種情況,（1）父元素沒有定位，負(fù)z-index在最下面（背景的后面）（2）父元素被定位，且不是auto，如設(shè)置為0，那么負(fù)的z-index就會出現(xiàn)在border的上面，div塊級元素的下面。

只有被定位的元素才能變高（加z-Index），什么是定位元素昵？那就是position不是static（不是默認(rèn)值）。所有元素的默認(rèn)position都是static（默認(rèn)值）。相對定位的z-index的值默認(rèn)為auto，也可以理解為是0（但是不是0），在其它被定位元素上加z-index設(shè)置為1,那么優(yōu)先級就會高于之前的auto。z-index值相同，后蓋住前，值越大優(yōu)先級越高。（適用于相對定位和絕對定位）。因此不管是相對定位還是絕對定位，只看z-index來決定層疊關(guān)系。

同級被定位的元素，z-index相同，下面的會覆蓋上面的元素（B覆蓋A）。A和B里面包裹的元素如是也被定位，但是不管A里面被定位的元素的z-index有多大，也沒有B里面的z-index的優(yōu)先級高，因為B始終在A的上面，B里面被定為元素再小，也會蓋住A里面的被定為的元素。這就是堆疊上下文的比喻概念。這也是出現(xiàn)有的z-index很大，但是在別的元素的下面，這就是因為堆疊上下文和堆疊順序了。
也可以說是堆疊上下文像是成立了一個部門，部分之間分高低貴賤，在高貴的部門里即使是最小的成員也瞧不起低等部門最大的人。
當(dāng)你發(fā)現(xiàn)一個負(fù)z-index，想讓他沉下去，但是沉不下去，這是因為層疊上下文的問題，部門過于高貴。