CSS中層疊和CSS的7階層疊水平（上篇）
今天搜尋資料時，忽然發現了以前沒注意的一個知識點，所以拖過來搞一搞，這個知識點叫做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.後來者居上原則
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.a{
position: absolute;
height: 400px;
width: 400px;
background-color: yellow；
}
.b{
position: absolute;
height:400px;
width: 400px;
background: red;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
執行結果：
解析：我們可以看到，紅色作為後來的元素覆蓋在之前的元素上了，在未設定z-index的前提下，後來元素會覆蓋前面新增到元素，當然實在開啟了絕對定位的前提下（不開啟絕對定位不能直觀的看到效果）
2.誰大誰先上原則
在.a新增z-index:2,在.b新增z-index:1
執行結果：
解析： 通常情況下，z-index越大，層級越高，越在上面
當發生巢狀時，祖先優先原則
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.a{
position: absolute;
height: 400px;
width: 400px;
background-color: yellow;
z-index: 2;
}
.b{
position: absolute;
height:400px;
width: 400px;
background: red;
margin-left: 100px;
z-index: 1
}
.a1{
position: absolute;
height: 200px;
width: 200px;
background-color: aqua;
}
.b1{
position: absolute;
height: 200px;
width: 200px;
background-color: blue;
z-index: 100
}
</style>
</head>
<body>
<div class="a">
<div class="a1"></div>
</div>
<div class="b">
<div class="b1"></div>
</div>
</body>
</html>
執行結果：
解析： 按照前面所說應該是藍色的格子會在最上面，這裡並沒有，原因就是祖先優先原則
a的層級大於b的層級，所以a裡面的元素會始終在b的上面，即使b的子元素的z-index為10000也沒用
注意：
所有主流瀏覽器都支援 z-index 屬性
任何的版本的 Internet Explorer （包括 IE8）都不支援屬性值 "inherit"。