一篇通俗易懂的CSS層疊順序與層疊上下文研究

層疊順序和層疊上下文是兩個概念，但它們又有著密不可分的關係，層疊順序很簡單^_^，認真思考即可，而堆棧上下文更是不值一提，我只需要遷根紅線你就懂了，所有說，都太簡單。第一段說難懂，主要是有了這篇文章，才化解位移。廢話少說，看劍。

在考慮到兩個元素可能重合的情況下，W3C提出了層疊這個概念，層疊是指如何去層疊另一個元素，比如兩個元素重合的時候應該讓誰在前面，誰在後面。那它們的規則又是什嗎？先來試水。

層疊順序篇

當兩個元素都是區塊層級元素時，預設情況越後面的元素層級越高

item11111item22222

可以看到item2把item1給蓋住了，說明越後面的元素層級越高，另外item1的文字還是隱隱約約的可以看到，這說明了背景的層級比文字小。

另外我們可以這樣

item11111

可以看到好像沒有item2這個元素一樣，主要原因是，在沒有設定背景的情況下，元素的背景是透明的(transparent)，並且允許後面的元素透上來。

在這種條件下，你會發現一個很搞笑的事，如下：

我是item2

如果不看代碼，就好像這段代碼真的是item2的。

當兩個元素為行內塊時

item1111item2

也是後一個元素的層級比前一個元素的層級高，不過和兩個區塊層級元素不同的是行內塊元素的背景層級比文字高。

當兩個元素為行內元素時

item1item2

和行內塊的行為一樣，背景層級比文字高，並且也是後一個元素比前一個元素層級高。

小總結

當兩個元素為正常流時，預設情況下後一個元素比前一個元素層級高，並且允許後面的元素透上來。

如果兩個元素是區塊層級元素，文字比背景層級高（因此不管是否設定背景文字始終會透上來）。

如果是行內或行內塊，背景比文字層級高（因此只要設定背景，後一個元素將透不上來）。

當一個元素為區塊層級元素，另一個為行內塊時

item1item2

行內塊比區塊層級元素層級高，依然是文字比背景層級高。

如果另外一個元素是行內元素和這個效果也是一樣的，代碼如下：

item1item2

當一個元素是行內塊另一個是行內元素時

item1item2

行內元素層級比行內塊元素高，背景比文字層級高。

浮動系列

浮動和浮動，後一個比前一個層級高。

浮動和塊元素，浮動層級高。

浮動和行內塊，行內塊層級高。

浮動和行內，行內層級高。

效果如下：

層疊順序總結

當兩個元素類型一樣時，預設情況下後一個元素層級比前一個元素層級高。

在沒有設定背景的情況下，元素的背景是透明的，並且允許後面的元素透上來。

塊元素和其他任意除定位元素以外，文字層級比背景層級高。

浮動和塊元素，浮動層級高。

浮動和行內塊，行內塊層級高。

浮動和行內，行內層級高。

定位和定位，後一個元素層級高。

定位比所有元素層級高。

它們的前後順序：小於0的z-index < 塊 < 浮動 < 行內塊 < 行內 < 定位 < 大於0的z-index

層疊上下文

如果你認真看完上一節，會不會奇怪一個問題，那就是在無特殊情況下為什麼定位元素總是比普通元素層級高，另外一點就是，大部分情況下為什麼總是後一個元素比前一個元素層級高，而罪魁禍首就是層疊上下文。

在HTML中有一個三維概念，也就是我們面向電腦螢幕的這一端為Z軸。

而凡是擁有層疊內容相關的元素，將離使用者最近，也就是越靠在Z軸前面。預設情況下只有根項目HTML會產生一個層疊上下文，並且元素一旦使用了一些屬性也將會產生一個層疊上下文，如我們常用的定位屬性。如兩個層疊上下文相遇時，總是後一個層疊前一個，除非使用z-index來改變。如下：

box1    box2

雖然item產生了一個層疊上下文，但並不影響它父元素。它的父元素依然被box2層疊了。另外上面還說只要是產生層疊內容相關的元素總是比其他元素層高，如下：

只需要給item加上一個背景即可，上一個案例只所以沒看到item元素是因為背景預設是透明的，並且允許後面的元素透上來。

除了定位元素可以建立層疊上下文以外，還有如下幾個屬性也可以做到。以下來自MDN

根項目 (HTML),

z-index 值不為 "auto"的 絕對/相對定位，

一個 z-index 值不為 "auto"的 flex 項目 (flex item)，即：父元素 display: flex|inline-flex，

opacity 屬性值小於 1 的元素

transform 屬性值不為 "none"的元素，

mix-blend-mode 屬性值不為 "normal"的元素，

filter值不為“none”的元素，

perspective值不為“none”的元素，

isolation 屬性被設定為 "isolate"的元素，

position: fixed

在 will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值

-webkit-overflow-scrolling 屬性被設定 "touch"的元素

這裡再拿opacity試水。

opacitybox2

原本應該是box2層疊box1的，但因為box1建立了一個層疊上下文，所以把box2層疊了。

知道層疊上下文有什麼用？

最大的好處就是當你想要改變元素的層級又不想用定位時，你還可以用很多其他的方法。如下：

原本浮動比塊元素層級高，但當使用了opacity之後，塊元素層級比浮動層級高，代碼如下：

floatopacity

總結

建立了層疊內容相關的元素比其他元素層級高。

兩個層疊上下文相遇時，後一個層級高。如果想改變層級可以使用z-index

