CSS的背景關系之層疊背景關系
看到層疊，大家一定會聯想到定位元素會是的元素之間發生“遮擋”，而z-index可以改變他們之間的遮擋優先級，但這僅僅是層疊這一概念中很小的一部分，
本文就來聊一聊css中的層疊背景關系到底是如何給元素規定疊加順序的，
一、什么是層疊背景關系？
層疊背景關系，英文稱作”stacking context”. 我們假定用戶正面向（瀏覽器）視窗或網頁，而 HTML 元素沿著其相對于用戶的一條虛構的 z 軸排開，層疊背景關系就是對這些 HTML 元素的一個三維構想，眾 HTML 元素基于其元素屬性按照優先級順序占據這個空間，
我們可以把層疊背景關系同樣可以理解成是元素的屬性，
下列方式會形成層疊背景關系（列舉常見的方式）：
- position 值為 static 以外的值，且 z-index 值不為 auto;
- flex (flexbox) 容器的子元素，且 z-index 值不為 auto;
- grid (grid) 容器的子元素，且 z-index 值不為 auto;
- opacity 屬性值小于 1 的元素;
- transform屬性 不為none的元素;
總結：
在層疊背景關系中，子元素同樣也按照上面解釋的規則進行層疊， 重要的是，其子級層疊背景關系的 z-index 值只在父級中才有意義，子級層疊背景關系被自動視為父級層疊背景關系的一個獨立單元，
二、什么是層疊水平？
“層疊水平”，英文稱作”stacking level”，決定了同一個層疊背景關系中元素在z軸上的顯示順序，網頁中的每個元素都是獨立的個體，他們一定是會有一個類似的排名排序的情況存在，而這個排名排序、論資排輩就是我們這里所說的“層疊水平”，
但注意，每一個層疊背景關系內部的子元素都不會突破包裹它的背景關系，
下面是引自張鑫旭大大的一段解釋，我覺得很通俗易懂：
所有的元素都有層疊水平，包括層疊背景關系元素，層疊背景關系元素的層疊水平可以理解為官員的職級，1品2品，縣長省長之類，然后，對于普通元素的層疊水平，我們的探討僅僅局限在當前層疊背景關系元素中，為什么呢？因為否則沒有意義，
翻譯成術語就是：普通元素的層疊水平優先由層疊背景關系決定，因此，層疊水平的比較只有在當前層疊背景關系元素中才有意義，
舉例：
大家看下面的一段代碼：
現象：
在這個例子中，每個被定位的元素都創建了獨自的層疊背景關系，因為他們被指定了定位屬性和 z-index 值，我們把層疊背景關系的層級列在下面：
- DIV #1
- DIV #2
- DIV #3
- DIV #4
- DIV #5
不同層的z-index他們的意義只相對于同一個層疊背景關系，你會發現z-index：100的也沒有覆寫z-index：1的，
結論：
千萬不要把層疊水平和CSS的z-index屬性混為一談，沒錯，某些情況下z-index確實可以影響層疊水平，但是，只限于定位元素以及flex盒子的孩子元素；而層疊水平所有的元素都存在，
三、什么是層疊順序？
“層疊順序”英文稱作”stacking order”. 表示元素發生層疊時候有著特定的垂直顯示順序，注意，這里跟上面兩個不一樣，上面的層疊背景關系和層疊水平是概念，而這里的層疊順序是規則，
在CSS2.1的年代，在CSS3還沒有出現的時候（注意這里的前提），層疊順序規則遵循下面這張圖（同樣是引自張大大的舊圖）：
四、層疊背景關系的特性
4.1 準則
- 誰大誰上：當具有明顯的層疊水平標示的時候，如識別的z-indx值，在同一個層疊背景關系領域，層疊水平值大的那一個覆寫小的那一個，通俗講就是官大的壓死官小的，
- 后來居上：當元素的層疊水平一致、層疊順序相同的時候，在DOM流中處于后面的元素會覆寫前面的元素，
在CSS和HTML領域，只要元素發生了重疊，都離不開上面這兩個黃金準則，因為后面會有多個實體說明，這里就到此為止，
4.2 特性
- 層疊背景關系的層疊水平要比普通元素高；
- 層疊背景關系可以嵌套，內部層疊背景關系及其所有子元素均受制于外部的層疊背景關系，
- 每個層疊背景關系和兄弟元素獨立，也就是當進行層疊變化或渲染的時候，只需要考慮后代元素，
- 每個層疊背景關系是自成體系的，當元素發生層疊的時候，整個元素被認為是在父層疊背景關系的層疊順序中，
講到這里我們對層疊背景關系應該有了一定理解，我們共勉～
寫在最后
參考：
- MDN
- 深入理解CSS中的層疊背景關系和層疊順序
CSS基礎系列》第四篇文章
如果對你有所幫助不妨給本專案的github 點個 star，這是對我最大的鼓勵！
關于我
- 花名：余光
- WX：j565017805
- 沉迷 JS，水平有限，虛心學習中
其他沉淀
- Github: Js版LeetCode題解
- 前端進階筆記
- CSS 基礎
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/264850.html
標籤：其他