以下幾種方式可以建立層疊上下文（包括但不限於哈）：
對有定位的元素（即postion不是預設的static）設定 z-index值
將 opacity 設定成比1小的值
將 position 設定成 fixed 或者 sticky （不需要再設定 z-index）
不使用 normal 而是使用 mix-blend-mode
在 display: flex 或者 display: grid 的容器元素內的子元素上使用 z-index，該子元素將會建立層疊上下文
使用 transform，filter，clip-path，或者 perspective
將 will-change 的值設定成 opacity 或者 transform
使用 isolation: isolate 顯示地建立層疊上下文
在某個元素建立層疊上下文後，該元素以及它的子元素就都會處於這個層疊上下文裡，在html網頁檢視裡可見的堆疊順序也會被限定在這乙個位置，不會錯亂到其它的層疊 上下文裡。
簡單說，假使a，b，c處於同乙個層疊上下文，並且其 z-index 依次是1，2，3，那麼就會出現c覆蓋b，b覆蓋a的情況。這時，如果a裡也有乙個建立了層疊上下文的元素d，且其 z-index 是10。按我們粗略的理解，d的 z-index 最大，就應該覆蓋c出現在最前面。然而事實是不管d的 z-index 有多大，都不會出現覆蓋c的情況，因為d所在的小世界a本身就比c要低，所以d無論怎麼努力突破自己的極限也只能達到其所在小世界a的天花板，不可能影響到更高層世界c。
所以，這個事實是不是想告訴我們 環境比努力重要？或者 出身比努力重要？哈？
層疊上下文
本文是我學習層疊上下文的總結。主要從以下途徑學習 mdn 張鑫旭大大的博文 層疊順序遵循下圖的規則，其中在張鑫旭大大的博文中提到inline block的層疊順序與圖中inline box是乙個level的 z index auto實際上和z index 0單純從層疊水平上看，可以認為是同一leve...
層疊上下文（stacking context）
一 什麼是層疊式上下文 層疊上下文，是html中的乙個三維概念 如果元素具備以下任何乙個條件，則該元素會建立乙個新的層疊上下文。二 什麼是層疊級別 同乙個層疊上下文的背景色以及內部元素，誰在上誰在下，這些都是由層疊級別來決定的。層疊級別是針對同乙個層疊上下文而言的。在同乙個曾得上下文中，層疊級別從低...
層疊上下文與層疊順序
參考文章 深入理解css中的層疊上下文和層疊順序 css深入理解之z index css深入理解之relative 先來弄清楚什麼是，層疊上下文。層疊上下文，英文稱作 stacking context 是html中的乙個三維的概念。如果乙個元素含有層疊上下文，我們可以理解為這個元素在z軸上就 高人一...