1.z-index基礎
z-index屬性指定了元素及其子元素的[z順序]，而[z順序]可以決定
當元素發生覆蓋的時候，哪個元素在上面。通常一個較大z-index值的元素會覆蓋較低的那一個。
z-index支持的屬性值：
1. z-index：auto；默認值，如果不對z-index設置，默認為auto；
2. z-index：<integer>；整數值，z-index：1，z-index：2等
3. z-index：inherit；繼承
z-index基本特性：
1. 支持負值；
2. 支持CSS3 animation動畫；
3. 在CSS2.1時代，不考慮CSS3，z-index要起作用需要和定位元素配合使用，只有定位元素（position：relative/absolute/fix/sticky）設置z-index才有作用（CSS3中有例外）；
2. z-index與定位元素
如果定位元素發生了覆蓋，且沒有嵌套（不是一個定位元素里面嵌套著另一個定位元素），誰在上面遵守下面兩個準則：
1. 后來居上的準則，后面的覆蓋前面的；
2. z-index哪個大，哪個上；
demo 1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 img{
position: absolute;
}
.div2 img{
position: relative;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="div1">
</div>
<div class="div2">
</div>
</body>
</html>
后面的定位元素覆蓋前面的定位元素在上面渲染。
demo 2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 img{
position: absolute;
z-index:2;
}
.div2 img{
position: relative;
z-index:1;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="div1">
</div>
<div class="div2">
</div>
</body>
</html>
z-index值大的在上面覆蓋z-index值小的
另一種情況：定位元素z-index發生了嵌套，誰在上面遵循如下原則：
- 祖先優先原則；
demo :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 img{
position: absolute;
z-index:3;
}
.div2 img{
position: relative;
z-index:-1;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="div1" style="position: relative;z-index: 1;">
</div>
<div class="div2" style="position: relative;z-index: 3;">
</div>
</body>
</html>
可以看到嵌套了的z-index定位元素，盡管前面的子元素的z-index值大，還是后面的圖片覆蓋了前面的，這里就遵循了祖先優先原則。
前提：祖先的z-index值是數值不是auto
demo ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div1 img{
position: absolute;
z-index:2;
}
.div2 img{
position: relative;
z-index:1;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="div1" style="position: relative;z-index: auto;">
</div>
<div class="div2" style="position: relative;z-index:1;">
</div>
</body>
</html>
當第一個圖片元素的祖先元素z-index值為auto時，祖先優先原則就會失效，z-index：auto可以看成是z-index：0，盡管第二個圖片元素的祖先元素z-index值比0大，但還是第一個圖片覆蓋第二個圖片。
CSS2.1：（z-index：auto時）當前層疊上下文的生成盒子層疊水平是0。盒子（除非是根元素）不會創建一個新的層疊上下文。這是起作用的反而是子元素的z-index值。第一個子元素的z-index大于第二個子元素的，所以會覆蓋。
3.CSS中層疊上下文和層疊水平
層疊上下文（stacking content）是HTML元素中的一個三維概念，表示元素在z軸上有了“高人一等”。
頁面根元素天生具有層疊上下文，稱之為"根層疊上下文"。
z-index值為數值的定位元素也具有層疊上下文。
層疊上下文中的每個元素都有一個層疊水平（stacking level），決定了同一個層疊上下文中元素在z軸上的顯示順序。幾乎所有的元素都有層疊水平，但是要放在層疊上下文中來看。
層疊水平和z-index不是一個東西。普通元素也有層疊水平，但z-index只在定位元素上起作用。
同一個層疊上下文中的層疊元素遵循“后來居上”和“誰大誰上”的層疊原則。
層疊上下文幾個特性：
- 層疊上下文可以嵌套（父元素中嵌套子元素），組成一個分層次的層疊上下文。
- 每個層疊上下文和兄弟元素獨立：當進行層疊變化或渲染的時候，只需要考慮后代元素。
- 每個層疊上下文是自成體系的：當元素的內容被層疊后，整個元素被認為是在父層的層疊順序中。
4．理解元素的層疊順序（stacking order）
層疊順序：元素發生層疊時候有著特定的垂直顯示順序。
著名的7階層疊水平（stacking level），用來判斷元素發生層疊時誰在上誰在下：
層疊元素的意義：
規范元素重疊時候的呈現規則。
為何層疊順序是上面圖片中的樣子？比如：為何內聯元素會覆蓋浮動元素？
之所以是這樣的七階，是因為這樣更符合加載的功能和視覺呈現
一般來說，像background/border是用來裝飾的，塊狀元素、浮動元素都是用來布局的，而內聯元素絕大部分是內容：圖片、文字，因為內容是頁面最重要的部分，因此層疊必須水平要高，重要的東西越要往上面放！
demo :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img{
float: left;
margin-right: -40px;
width: 250px;
height: 400px;
}
</style>
</head>
<body>
<span>
以前浮動課學過，浮動設計的作用是實現文字環繞圖片的效果。如果文字和
圖片發生重疊，顯然，是后面的文字要優先顯示的，因為，文字比圖片重要。
</span>
</body>
</html>
這里把圖片變成了浮動元素，內容（內聯元素）覆蓋了圖片浮動元素，比浮動元素的層疊水平要高。
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.inline-block,.block{
width: 400px;
height: 200px;
position: relative;
}
.inline-block{
display: inline-block;
background-color: olive;
margin: -30px;
}
.block{
display: block;
background-color: green;
}
</style>
</head>
<body>
<div class="inline-block">
display:inline-block
</div>
<div class="block">
display:block;
</div>
</body>
</html>
內聯元素比塊狀元素的層疊水平高，上面的背景色覆蓋了下面的，但是下面的文字覆蓋了上面的背景色。這是因為：背景色的覆蓋是層疊順序，文字的覆蓋是后來居上原則。文字是inline元素和inline-block是平級的，所以這里要用到后來居上原則
5.z-index與層疊上下文（解釋z-index的實際行為表現）
三個行為要點：
1. 定位元素默認的`z-index:auto`可以看成是z-index:0
2.z-index不為auto的定位元素會創建層疊上下文；
3.z-index層疊順序的比較止步于父級層疊上下文；
第一個行為要點：定位元素默認的z-index:auto可以看成是z-index:0;
demo 1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.img1,.img2{
width: 200px;
height: 400px;
}
.img1{
}
.img2{
margin-left: -60px;
}
</style>
</head>
<body>
</body>
</html>
根據后來居上原則后面的元素會覆蓋前面的元素
demo 2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.img1,.img2{
width: 200px;
height: 400px;
}
.img1{
position: relative;
}
.img2{
margin-left: -60px;
}
</style>
</head>
<body>
</body>
</html>
第一個圖片變成定位元素之后，前面的圖片又覆蓋了后面的，這是因為當變為定位元素后，沒有對z-index設置值，所以默認值為auto，從層疊順序上看，這時可以把z-index：auto看成是z-index：0。這時再對照七階層疊那個圖：
第二個行為要點：z-index不為auto的定位元素會創建層疊上下文
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div2{
position: absolute;
background: blue;
width: 200px;
height: 400px;
margin-left: 100px;
}
.div2 img{
position: relative;
margin-left: -100px;
z-index: -1;
}
</style>
</head>
<body>
<div class="div2">
</div>
</body>
</html>
絕對定位元素只是一個普通元素，并不具有層疊上下文。此時圖片的層疊上下文是頁面根元素。所以背景色會覆蓋圖片。
一旦給父元素z-index值為數值不為auto時，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.div2{
position: absolute;
background: blue;
width: 200px;
height: 400px;
margin-left: 100px;
z-index: 0;
}
.div2 img{
position: relative;
margin-left: -100px;
z-index: -1;
}
</style>
</head>
<body>
<div class="div2">
</div>
</body>
</html>
當我們給父元素
.div設置z-index:0;時，就創建了層疊上下文，此時圖片的層疊上下為文就變成了容器。z-index負值的層疊順序在層疊上下文元素的背景色之上。
從層疊順序上講，z-index：auto可以看成z-index：0。但是從層疊上下文來講，兩者卻有著本質差異！本質差異：z-index：auto不可以創建層疊上下文，z-index：0可以。
第三個行為要點：z-index受限于層疊上下文
demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.img1,.img2{
width: 200px;
height: 400px;
}
.box1{
position: relative;
z-index: 0;
}
.box1 img{
position: absolute;
z-index: 99999;
}
.box2{
position: relative;
z-index: 1;
margin-left: 120px;
}
.box2 img{
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
可以看到盡管第一個圖片的z-index遠遠大于第二個圖片，但是由于第二個圖片的父元素的層疊順序大于第一個圖片父元素的層疊順序，所以最終的行為表現仍然是后面的覆蓋前面的。
6.其他CSS屬性與層疊上下文（不只是z-index）
1.頁面根元素天生具有層疊上下文，稱之為"根層疊上下文"。
2.z-index值為數值的定位元素（相對或絕對）也具有層疊上下文。
3.其他屬性......創建層疊上下文。
demo 1：display:flex與層疊上下文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
background: blue;
width: 300px;
height: 500px;
margin: 0 auto;
}
.box>div{
z-index: 1;
}
.box>div>img{
position: relative;
z-index: -1;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="box">
<div>
</div>
</div>
</body>
</html>
由于
.box不是層疊上下文元素，所以圖片沒有覆蓋背景色，此時圖片的層疊上下文為根元素。
當我們為.box設置display:flex之后：
圖片覆蓋了背景色。
注意：給.box設置display:flex不是.box變為了層疊上下文元素，而是它的子項變成了層疊上下文元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
background: blue;
width: 300px;
height: 500px;
margin: 0 auto;
display: flex;
}
.box>div{
z-index: auto;
}
.box>div>img{
position: relative;
z-index: -1;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="box">
<div>
</div>
</div>
</body>
</html
當對它的子元素的z-index值設置
.box>div{ z-index: auto; }后，.box元素的子項就不再是層疊上下文元素了
demo 2 ：opacity ≠ 1 與層疊上下文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
background: blue;
width: 300px;
height: 500px;
margin: 0 auto;
}
.box img{
position: relative;
z-index: -1;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
當我們為
.box元素設置opacity為0.5時：
圖片顯示在了背景色上面，這是因為
opacity ≠ 1的元素為層疊上下文元素。
demo 3 ：transform ≠ none 與層疊上下文
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
background: blue;
width: 300px;
height: 500px;
margin: 0 auto;
transform: rotate(15deg);
}
.box img{
position: relative;
z-index: -1;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
transform ≠ none的元素為層疊上下文元素.
......以上不過多贅述。
7.z-index與其它CSS屬性層疊上下文（非定位元素層疊上下文和z-index關系）
1.不支持z-index的層疊上下文元素的層疊順序均是z-index：auto級別（不支持z-index的層疊上下文，指的就是那些CSS屬性創建的層疊上下文）。
舉個例子：
上圖中img1、img2、img3、img4、img5依次相互覆蓋，img1對應七階層疊水平中的第五階，是inline水平元素，img2、img4、img5是不依賴z-index的層疊上下文，img3是z-index：auto，它們都對應第六階，屬于同階，遵循后來居上原則，依次覆蓋。
2.依賴z-index的層疊上下文元素的層疊順序取決于z-index值
?????依賴z-index值創建層疊上下文的情況：
1.position值為relative/absolute或fixed（部分瀏覽器）；
2.display:flex|inline-flex容器的子flex項；
上圖中的.box元素是普通元素，它的子項才是層疊上下文元素，所以不僅被第一張圖片覆蓋，還被父元素的背景色覆蓋
