前言
原文是在前面對transform引起的z-index“失效”探究過程中找到的，非常棒，所以轉(zhuǎn)載分享。本文大多摘自原文，進(jìn)行了壓縮，也加入了我自己的理解，希望對大家有幫助。
默認(rèn)情況下，網(wǎng)頁內(nèi)容是沒有偏移角的垂直視覺呈現(xiàn)，當(dāng)內(nèi)容發(fā)生層疊的時候，一定會有一個前后的層疊順序產(chǎn)生。
我們大家可能都熟悉CSS中的z-index屬性，需要跟大家講的是，z-index實際上只是CSS層疊上下文和層疊順序中的一葉小舟。
一、什么是層疊上下文
層疊上下文，英文稱作“stacking context”。是HTML中的一個三維的概念。如果一個元素含有層疊上下文，我們可以理解為這個元素在z軸上“高人一等”。
z軸
表示的是用戶與屏幕的這條看不見的垂直線：
具象化
擁有層疊上下文的元素相當(dāng)于是一個容器，容器里裝著其他元素。
不同容器內(nèi)的元素的高低由容器決定。容器里面的元素，有高低之分，但不會突破容器。
二、什么是層疊水平
“層疊水平”英文稱作”stacking level”，決定了同一個層疊上下文中元素在z軸上的顯示順序。
就跟人一樣，網(wǎng)頁中的元素雖然都是獨(dú)立個體，但是總有一個類似的排名排序的情況存在。這個就是層疊水平。層疊上下文的層疊水平是優(yōu)先級更高的層疊水平。
普通元素的層疊水平優(yōu)先由層疊上下文決定，因此，層疊水平的比較只有在當(dāng)前層疊上下文元素中才有意義。
注意：千萬不要把層疊水平和z-index屬性混為一談。某些情況下z-index確實可以影響層疊水平，但是，只限于定位元素以及flex盒子的子元素，而層疊水平所有的元素都存在。
三、什么是層疊順序
“層疊順序”英文稱作”stacking order”，表示元素發(fā)生層疊時的垂直顯示順序。層疊上下文和層疊水平是概念，而這里的層疊順序是規(guī)則。
在CSS2.1的年代，在CSS3還沒有出現(xiàn)的時候（注意這里的前提），層疊順序規(guī)則遵循下面這張圖：
這樣的設(shè)計是由元素的重要性出發(fā)的，內(nèi)容優(yōu)于布局，布局優(yōu)于裝飾
注意：
- 這是css2的時候
- 這里的
z-index: 0只是表示一個0級別，對應(yīng)的是z-index: auto，沒有創(chuàng)建層疊上下文的級別
四、層疊準(zhǔn)則
層疊領(lǐng)域的黃金準(zhǔn)則。當(dāng)元素發(fā)生層疊的時候，其覆蓋關(guān)系遵循下面2個準(zhǔn)則：
誰大誰上
當(dāng)具有明顯的層疊水平標(biāo)示的時候，如識別的z-indx值，在同一個層疊上下文領(lǐng)域，層疊水平值大的那一個覆蓋小的那一個。后來居上
當(dāng)元素的層疊水平一致、層疊順序相同的時候，在DOM流中處于后面的元素會覆蓋前面的元素。
五、層疊上下文的特性
層疊上下文元素有如下特性：
- 層疊上下文的層疊水平要比普通元素高；
- 層疊上下文可以阻斷元素的混合模式；
- 層疊上下文可以嵌套，內(nèi)部層疊上下文及其所有子元素均受制于外部的層疊上下文；
- 每個層疊上下文和兄弟元素獨(dú)立，也就是當(dāng)進(jìn)行層疊變化或渲染的時候，只需要考慮后代元素；
- 每個層疊上下文是自成體系的，當(dāng)元素發(fā)生層疊的時候，整個元素被認(rèn)為是在父層疊上下文的層疊順序中。
六、層疊上下文的創(chuàng)建
層疊上下文基本是由一些特定的css屬性所創(chuàng)建，主要分為三種：
1. 根層疊上下文
頁面根元素，也就是滾動條的默認(rèn)的始作俑者<html>元素。這就是為什么，絕對定位元素在left/top等值定位的時候，如果沒有其他定位元素限制，會相對瀏覽器窗口定位的原因。
2. 定位元素與傳統(tǒng)層疊上下文
- 設(shè)置
position:relative/position:absolute，z-index值不是auto的定位元素 - 設(shè)置
position:fixed的定位元素，z-index為任意
3. CSS3與新時代的層疊上下文
- 設(shè)置了z-index，且不為auto的flex元素(父元素display:flex|inline-flex)
- 設(shè)置了opacity，且不為1的元素
- 設(shè)置了transform，且不為none的元素
- 設(shè)置了mix-blend-mode值，且不為normal的元素
- **設(shè)置了isolation，且為isolate的元素
- 設(shè)置了filter值，且不是none的元素
- will-change指定的屬性值為上面任意一個
- 設(shè)置了-webkit-overflow-scrolling，且為touch的元素
七、層疊上下文與層疊順序
最終的層疊順序分兩種情況討論：
- 層疊上下文不依賴
z-index數(shù)值，其層疊順序是z-index: auto，就是z-index: 0的級別，沒有創(chuàng)建層疊上下文的元素的級別
- 層疊上下文不依賴
- 層疊上下文依賴
z-index數(shù)值，則由z-index決定
也就是兩個層疊準(zhǔn)則的詳細(xì)解釋，第一個：后來者居上，第二個：誰大誰上。
- 層疊上下文依賴
參考
張鑫旭的博文：
CSS3混合模式mix-blend-mode/background-blend-mode簡介
理解CSS3 isolation: isolate的表現(xiàn)和作用
使用CSS3 will-change提高頁面滾動、動畫等渲染性能
