層疊順序：

層疊上下文（border/background）< 負(fù)z-index < block塊狀盒子 < 浮動的盒子 < inline/inline-block水平盒子 < z-index:auto 或者 z-index:0 < 正z-index（定位并設(shè)定了正的z-index值，z-index值越大 層級越高）

判斷兩個元素的層疊上下關(guān)系：

1、首先先看要比較的兩個元素是否處于同一個層疊上下文中：??????

????1.1如果是，誰的層疊等級大，誰在上面（怎么判斷層疊等級大小呢？——看“層疊順序”圖）。??????

????1.2如果兩個元素不在統(tǒng)一層疊上下文中，請先比較他們所處的層疊上下文的層疊等級，并且子元素受限于父元素的層疊等級。?

2、當(dāng)兩個元素層疊等級相同、層疊順序相同時，在DOM結(jié)構(gòu)中后面的元素層疊等級在前面元素之上。

CSS3中的屬性對層疊上下文的影響：

????1.父元素的display屬性值為flex|inline-flex，子元素z-index屬性值不為auto的時候，子元素為層疊上下文元素；

????2.元素的opacity屬性值不是1；

????3.元素的transform屬性值不是none；

????4.元素mix-blend-mode屬性值不是normal`；

????5.元素的filter屬性值不是none；

????6.元素的isolation屬性值是isolate；

????7.will-change指定的屬性值為上面任意一個；

????8.元素的-webkit-overflow-scrolling屬性值設(shè)置為touch。