本文是我學習層疊上下文的總結。主要從以下途徑學習：層疊順序遵循下圖的規則，其中在張鑫旭大大的博文中提到inline-block的層疊順序與圖中inline box是乙個level的；z-index:auto實際上和z-index:0mdn：
張鑫旭大大的博文：
單純從層疊水平上看，可以認為是同一level（兩者在層疊上下文領域有著根本性的差異）。（如要看完整請移步到張鑫旭大大博文）
根據上圖，層疊水平越大，就顯示在越上面。
當層疊水平一樣時，在dom中位置越後，就顯示在越上面。
html元素
z-index的值不為auto的相對/絕對定位元素
position: fixed的元素
應用了某些css3的元素
下面是我自己寫的一些demo，主要與z-index屬性相關。
demo通用html**
outter
inner
當outter的position值為relative或absolute，並且不設定z-index值或者z-index值為auto時，outter沒有建立層疊上下文。此時根據層疊順序表，負的z-index元素在block元素下面，所以，inner被outter覆蓋了。
檢視demo
相對/絕對定位
雖然outter的position值設定為absolute或者relative，但z-index值設定為auto，此時，outter並沒有建立層疊上下文，所以，效果與基礎demo一致。
檢視demo
當outter的z-index值設定為數值，甚至為0時，outter會建立層疊上下文，此時inner會覆蓋outter。
檢視demo
position: fixed的元素
當outter的position值設定為fixed時，outter會建立層疊上下文，此時inner會覆蓋outter。
檢視demo
opacity小於1的元素
當outter的opacity值設定小於1時，outter會建立層疊上下文，此時inner會覆蓋outter。
檢視demo
transform值不為none元素
當outter的opacity值設定不為none時，outter會建立層疊上下文，此時inner會覆蓋outter。
檢視demo
will-change指定了任意屬性
當outter的will-change值設定為任何值時，outter會建立層疊上下文，此時inner會覆蓋outter。
檢視demo
z-index的值不為auto的flex項（即父元素display: flex | inline-flex）
此處的html結構有點不同。
在原來的html外層加乙個class為box的div，並設定display值為flex或者inline-flex，此時outter為flex項，會建立層疊上下文，此時inner會覆蓋outter。
檢視demo
其他
由於暫時對mix-blend-mode、filter、isolation、-webkit-overflow-scrolling屬性了解不多，所以沒有做demo。如果想看demo效果，可以看張鑫旭大大的博文。
學習了層疊上下文之後，對於元素覆蓋這個問題有了比較清晰的認識，有時候可以不依賴z-index來解決問題了。
層疊上下文（stacking context）
一 什麼是層疊式上下文 層疊上下文，是html中的乙個三維概念 如果元素具備以下任何乙個條件，則該元素會建立乙個新的層疊上下文。二 什麼是層疊級別 同乙個層疊上下文的背景色以及內部元素，誰在上誰在下，這些都是由層疊級別來決定的。層疊級別是針對同乙個層疊上下文而言的。在同乙個曾得上下文中，層疊級別從低...
CSS層疊上下文
以下幾種方式可以建立層疊上下文 包括但不限於哈 對有定位的元素 即postion不是預設的static 設定 z index值 將 opacity 設定成比1小的值 將 position 設定成 fixed 或者 sticky 不需要再設定 z index 不使用 normal 而是使用 mix b...
層疊上下文與層疊順序
參考文章 深入理解css中的層疊上下文和層疊順序 css深入理解之z index css深入理解之relative 先來弄清楚什麼是，層疊上下文。層疊上下文，英文稱作 stacking context 是html中的乙個三維的概念。如果乙個元素含有層疊上下文，我們可以理解為這個元素在z軸上就 高人一...