目錄
什麼是層疊
建立層疊樣式
控制層疊的順序
在說css層疊前我們來做乙個假設，假設我們有三張卡片，分別是a,b,c，現在我們把三張卡片疊放在一起，這就是一種層疊
在css中，每個元素節點都可以看作是乙個盒子，或者一張卡片。在css中，元素並非本身就是層疊元素，如果需要元素層疊，需要用特定的屬性來告訴瀏覽器，把該元素渲染成層疊樣式。
以下屬性可以把元素渲染成層疊樣式
position值為absolute（絕對定位）或relative（相對定位）且z-index值不為auto的元素；
position值為fixed（固定定位）或sticky（粘滯定位）的元素（沾滯定位適配所有移動裝置上的瀏覽器，但老的桌面瀏覽器不支援）；
flex (flexbox) 容器的子元素，且z-index值不為auto；
grid (grid) 容器的子元素，且z-index值不為auto；
opacity屬性值小於1的元素（參見 the specification for opacity）；
mix-blend-mode屬性值不為normal的元素；
以下任意屬性值不為none的元素：
transform
filter
perspective
clip-path
mask/mask-image/mask-border
isolation屬性值為isolate的元素；
-webkit-overflow-scrolling屬性值為touch的元素；
will-change值設定了任一屬性而該屬性在 non-initial 值時會建立層疊上下文的元素（參考這篇文章）；
contain屬性值為layout、paint或包含它們其中之一的合成值（比如contain: strict、contain: content）的元素。
在css中，為了方便布局，提供了乙個設定元素堆疊順序的屬性z-index
z-index只對指定了 position屬性的元素有效
當沒有指定z-index的時候， 所有元素都在會被渲染在預設層(0層)
語法：z-index:value
value：該值是乙個number型別，預設是0，可以正數，也可以負數
層疊上下文
本文是我學習層疊上下文的總結。主要從以下途徑學習 mdn 張鑫旭大大的博文 層疊順序遵循下圖的規則，其中在張鑫旭大大的博文中提到inline block的層疊順序與圖中inline box是乙個level的 z index auto實際上和z index 0單純從層疊水平上看，可以認為是同一leve...
層疊上下文（stacking context）
一 什麼是層疊式上下文 層疊上下文，是html中的乙個三維概念 如果元素具備以下任何乙個條件，則該元素會建立乙個新的層疊上下文。二 什麼是層疊級別 同乙個層疊上下文的背景色以及內部元素，誰在上誰在下，這些都是由層疊級別來決定的。層疊級別是針對同乙個層疊上下文而言的。在同乙個曾得上下文中，層疊級別從低...
CSS層疊上下文
以下幾種方式可以建立層疊上下文 包括但不限於哈 對有定位的元素 即postion不是預設的static 設定 z index值 將 opacity 設定成比1小的值 將 position 設定成 fixed 或者 sticky 不需要再設定 z index 不使用 normal 而是使用 mix b...