今天搜尋資料時，忽然發現了以前沒注意的乙個知識點，所以拖過來搞一搞，這個知識點叫做css的7階層疊水平
在說這個知識之前，我們必須要先了解乙個東西以便於我們更好的理解css的7階層疊水平
這個東西就是z-index屬性（此篇為上篇，僅僅講z-index）
基本含義：
z-index通俗來說就是在z軸上的索引，z軸是垂直於電腦螢幕的一根軸
用來設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面，即通常情況下，z-index為2的元素會在z-index為1的元素上面
取值情況：
z-index有三個取值
auto：預設。堆疊順序與父元素相等。
number：設定元素的堆疊順序。
inherit：規定應該從父元素繼承 z-index 屬性的值。
特性：
1.支援負值（如果為正數，則離使用者更近，為負數則表示離使用者更遠。）
2.支援css3 animation動畫；（並沒什麼實用應用場景）
3.在css2.1時代，需要和定位元素配合使用，如果不考慮css3，只有定位元素（position:relative/absolute/fixed/sticky）的z-index才有作用！在css3中有例外
準則：
1.後來者居上原則
執行結果：
解析：我們可以看到，紅色作為後來的元素覆蓋在之前的元素上了，在未設定z-index的前提下，後來元素會覆蓋前面新增到元素，當然實在開啟了絕對定位的前提下（不開啟絕對定位不能直觀的看到效果）
2.誰大誰先上原則
在.a新增z-index:2,在.b新增z-index:1
執行結果：
解析：通常情況下，z-index越大，層級越高，越在上面
當發生巢狀時，祖先優先原則
執行結果：
解析：按照前面所說應該是藍色的格仔會在最上面，這裡並沒有，原因就是祖先優先原則
a的層級大於b的層級，所以a裡面的元素會始終在b的上面，即使b的子元素的z-index為10000也沒用
注意：
所有主流瀏覽器都支援 z-index 屬性
任何的版本的 internet explorer （包括 ie8）都不支援屬性值 "inherit"。
CSS中層疊和CSS的7階層疊水平
今天搜尋資料時，忽然發現了以前沒注意的乙個知識點，所以拖過來搞一搞，這個知識點叫做css的7階層疊水平 在說這個知識之前，我們必須要先了解乙個東西以便於我們更好的理解css的7階層疊水平 這個東西就是z index屬性 此篇為上篇，僅僅講z index 基本含義 z index通俗來說就是在z軸上的...
CSS中層疊和CSS的7階層疊水平
今天搜尋資料時，忽然發現了以前沒注意的乙個知識點，所以拖過來搞一搞，這個知識點叫做css的7階層疊水平 在說這個知識之前，我們必須要先了解乙個東西以便於我們更好的理解css的7階層疊水平 這個東西就是z index屬性 此篇為上篇，僅僅講z index 基本含義 z index通俗來說就是在z軸上的...
CSS中層疊和CSS的7階層疊水平（上篇）
1.後來者居上原則 複製 document 複製 執行結果 解析 我們可以看到，紅色作為後來的元素覆蓋在之前的元素上了，在未設定z index的前提下，後來元素會覆蓋前面新增到元素，當然實在開啟了絕對定位的前提下 不開啟絕對定位不能直觀的看到效果 2.誰大誰先上原則 在.a新增z index 2,在...