描述下z-index和疊加上下文是如何形成的？
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【 描述下z-index和疊加上下文是如何形成的？】
標題：
【修真院wbe小課堂】描述下z-index和疊加上下文是如何形成的？
開場語：
大家好，我是IT修真院北京分院第37期的學員顧仁鵬，一枚正直純潔善良的web程式設計師，今天給大家分享一下，修真院官網css任務7，深度思考中的知識點——描述下z-index和層疊上下文是如何形成的？
（1）背景介紹：
凡事都有先後順序，在CSS中，也是如此。一般情況下，元素都是在一個層面上，看不出差異。但是一旦元素之間出現了重疊，就不可能出現等同關係，就要有個先後順序，這就產生了層疊順序和層疊上下文，而z-index則是它們中的一部分。
（2）知識剖析：
什麼是層疊上下文？什麼是層疊水平?
層疊上下文，英文稱作”stacking context”. 是HTML中的一個三維的概念。它是層疊元素的根本，兩個層疊元素決定順序，必須在同一個擁有層疊上下文元素中，也就是它們共同的父級或者祖先級。而作為一個擁有層疊上下文的元素自身嚴格的說它可以改變自己原先的層疊水平。
層疊水平英文稱作”stacking level”，也可以叫層疊等級，決定了同一個層疊上下文中元素在z軸上的顯示順序。
什麼是z-index？
w3school給出的定義是：z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
層疊順序：
正z-index>z-index:0/auto>inline/inline-block盒子>float盒子>block盒子>負z-index>background/border
注意：最重要的一點就是這個層疊順序的前提是在同一個層疊上下文元素中！
層疊準則
僅靠層疊順序圖，無法處理所有css和html元素層疊時的順序，所以就有了上面兩條黃金準則，他可以處理所有層疊情況。
誰大誰上：當具有明顯的層疊水平標示的時候，如識別的z-indx值，在同一個層疊上下文領域，層疊水平值大的那一個覆蓋小的那一個。
後來居上：當元素的層疊水平一致、層疊順序相同的時候，在DOM流中處於後面的元素會覆蓋前面的元素。
層疊上下文的特性
層疊上下文的層疊水平要比普通元素高。
層疊上下文可以阻斷元素的混合模式。
層疊上下文可以巢狀，內部層疊上下文及其所有子元素均受制於外部的層疊上下文。
每個層疊上下文和兄弟元素獨立，也就是當進行層疊變化或渲染的時候，只需要考慮後代元素。
每個層疊上下文是自成體系的，當元素髮生層疊的時候，整個元素被認為是在父層疊上下文的層疊順序中。
層疊上下文的建立
1. 頁面根元素天生具有層疊上下文，稱之為“根層疊上下文”。
2. z-index值為數值的定位元素的傳統層疊上下文。
3. 其他CSS3屬性。
根層疊上下文：指的是頁面根元素，也就是滾動條的預設的始作俑者 html 元素。這就是為什麼，絕對定位元素在left/top等值定位的時候，如果沒有其他定位元素限制，會相對瀏覽器視窗定位的原因。
對於包含有position:relative/absolute/fixed的定位元素，當其z-index值不是auto的時候，會建立層疊上下文。
z-index值不為auto的flex項(父元素display:flex|inline-flex).
1.元素的opacity值不是1.
2.元素的transform值不是none.
3.元素mix-blend-mode值不是normal.
4.元素的filter值不是none.
5.元素的isolation值是isolate.
6.will-change指定的屬性值為上面任意一個。
7.元素的-webkit-overflow-scrolling設為touch.
（3）常見問題：
固定定位元素，滾動時被覆蓋。
（4）解決方案：
給需要在最上面的固定定位元素的z-index設定一個正值，形成層疊上下文。
（5）編碼實戰：
.header {
width: 100%;
padding: 0 15px;
position: fixed;
z-index: 1024;
top: 0;
background-color: #29bde0;
}
<div class="header">
<div class="header-top">
<div class="header-left"></div>
<div class="header-middle">投票</div>
<div class="header-right"></div>
</div>
</div>
（6）拓展思考：
transform對定位元素的影響：
-
transform改變overflow對absolute元素的限制
2.transform限制position:fixed的跟隨效果
3.transform限制absolute的100%寬度大小
（7）參考文獻：
張鑫旭的文章
（8）更多討論：
Q1：提問人：浮動元素與定位元素重疊
A1：回答人：
與相對定位元素重疊，浮動元素會在下面，但是相對定位元素的文字會形成字圍效果，因為相對定位沒有脫離文件流；與絕對定位或者固定定位重疊則依然定位元素在上面，而且文字正常不會出現字圍。
Q2：提問人：出現重疊的方法？
A2：回答人：一般來說 定位 浮動 負margin。
Q3：提問人：利用重疊佈局？
A3：回答人：可以利用浮動與普通元素重疊然後用margin來撐開兩者之間的間距，從而形成一邊寬度固定，一邊自適應的佈局。
（9）鳴謝：
感謝郭晨陽師兄，此教程是在他們之前技術分享的基礎上完善而成。
（10）結束語：
今天的分享就到這裡啦，歡迎大家點贊、轉發、留言、拍磚~
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地