今天給大家分享一下，z-index和層疊上下文如何形成的？
1.背景介紹
層疊上下文，就是在呈現(xiàn)的時候決定哪個元素在上、哪個元素在下，初學的時候覺得這東西應該就是跟z-index的大小有關，然而并沒有這么簡單，我們來感受下。
2.知識剖析
先了解一下z-index的基本信息：
在W3C是這樣描述的：每個元素都具有三維空間位置，除了水平和垂直位置外，還能在 "Z軸" 上層層相疊、排列。元素在 "Z軸" 方向上的呈現(xiàn)順序，由層疊上下文和層疊級別決定。在文檔中，每個元素僅屬于一個層疊上下文。元素的層疊級別為整型，它描述了在相同層疊上下文中元素在 "Z軸" 上的呈現(xiàn)順序。同一層疊上下文中，層疊級別大的顯示在上，層疊級別小的顯示在下，相同層疊級別時，遵循后來居上的原則，即其在HTML文檔中的順序。不同層疊上下文中，元素呈現(xiàn)順序以父級層疊上下文的層疊級別來決定呈現(xiàn)的先后順序，與自身的層疊級別無關。
z-index語法：
z-index: auto(自動，默認值) | integer(整數(shù)) |? inherit (繼承)
z-index 接受的屬性值為：關鍵字auto和整數(shù)，整數(shù)可以是負值。
需要注意的是 z-index 雖然很給力，卻只能應用于定位元素（即設置了 position 屬性為非 static 值），其它情況下，z-index 將被忽略。
3.常見問題
處理兩個或兩個以上盒子之間z-index的復雜關系？
什么是層疊上下文（STACKING CONTENT）
在一個層疊上下文，所有的元素根據(jù)規(guī)則從下到上排列，分成了七個等級：
1、背景和邊框 — 形成層疊上下文的元素的背景和邊框。 層疊上下文中的最低等級。
2、負z-index值 — 層疊上下文內(nèi)有著負z-index值的子元素。
3、塊級盒 — 文檔流中非行內(nèi)非定位子元素。
4、浮動盒 — 非定位浮動元素。
5、行內(nèi)盒 — 文檔流中行內(nèi)級別非定位子元素。
6、z-index: 0 — 定位元素。這些元素形成了新的層疊上下文。
7、正z-index值 — 定位元素。層疊上下文中的最高等級
層疊上下文是具有包含關系的，同時又各自應用層疊規(guī)則而互不影響，也就是說一個層疊上下文中有一個z-index值很大的定位元素，它依然會處于層疊等級高于創(chuàng)建該層疊上下文元素的元素的下方。
4.解決方案
1,如果兩個元素都沒有定位發(fā)生位置重合現(xiàn)象或者兩個都已定位元素且z-index相同發(fā)生位置重合現(xiàn)象，那么按文檔流順序，后面的覆蓋前面的。
2,如果兩個元素都沒有設置z-index，使用默認值，一個定位一個沒有定位，那么定位元素覆蓋未定位元素
3,如果父元素z-index有效，那么子元素無論是否設置z-index都和父元素一致，在父元素上方
4,如果父元素z-index失效（未定位或者使用默認值），那么定位子元素的z-index設置生效
5,如果兄弟元素的z-index生效，那么其子元素覆蓋關系有父元素決定
5.編碼實戰(zhàn)
上面
6.擴展思考
問題：為什么內(nèi)聯(lián)元素的層疊順序要比塊狀元素高？
內(nèi)聯(lián)元素一般都是基于語義級(semantic)的基本元素，它只能容納文本或者其他內(nèi)聯(lián)元素，通常被包括在塊元素中使用，常見內(nèi)聯(lián)元素有“a、b、br”等,基本上可以說成內(nèi)聯(lián)元素變成了塊狀元素的子元素，所以子元素也就是內(nèi)聯(lián)元素要高于塊狀元素。
1.行內(nèi)塊的級別比塊級元素的層級高，行內(nèi)塊能覆蓋塊
2.z-index不能和和folat一起使用，因為他的層級已經(jīng)規(guī)定在z-index：0；和z-index負數(shù)之間
2..z-index不能和和folat ?folat在z-index負數(shù) ?和z-index為0 之間
7.參考文獻
鏈接：http://www.itdecent.cn/p/226c585c0cd0
W3C：http://www.w3school.com.cn/cssref/pr_pos_z-index.asp
關于z-index那些你不知道的事：https://webdesign.tutsplus.com/zh-hans/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892
Stacking Content層疊上下文：https://leozdgao.me/stacking-content-basic/
