先提三個問題：
1、position 和 z-index 的默認屬性是什麼？
希望你答對了！答案：position：static，z-index ：auto
剩下的兩個問題：
2、position 所有屬性值，是否支持 z-index ？
3、元素設置不同 position 屬性值，重疊在一起，如何讓其中任意一個在最上層？
帶着這些問題，今天，來挖一下 position 和 z-index 的一些‘私情’！
本文，將對多個元素進行對別，分別帶不同 position 值，加與不加 z-index，進行測試！
1、不加z-index情況：
· inherit 和 static 的元素，不管div位置，都屈於最底層，兩者正常的文檔流，誰div靠後，z-index更上層。
· 其他元素後來居上：absolute、 fixed、relative
但出現這種情況：雖然由於前後關係，static 在 inherit 上層，但 inherit 的文字和static 重合了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style>
body{ margin:0;}
div{
width: 100px;
height: 100px;
border:1px solid #000;
text-indent: 3px;
color: #fff;
}
</style>
</head>
<body>
<div class="block1" style="position: fixed; top:10px; left: 50px; background:purple">fixed</div>
<div class="block2" style="position: absolute;top:10px; left: 75px; background: blue;">absolute</div>
<div class="block3" style="position:relative; background:yellow; top:10px; left: 95px; color:#000">relative</div>
<div class="block4" style="position:inherit; background:green; margin-top: -90px;">inherit</div>
<div class="block5" style="position: static; background:orange; margin-top:-105px;margin-left: 25px;">static</div>
</body>
</html>
個人理解，是由於 inherit 繼承 body 的 static，自動忽略 top, bottom, left, right 或者 z-index 聲明，兩者同級。
2、加 z-index：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style>
body{ margin:0;}
div{
width: 100px;
height: 100px;
border:1px solid #000;
text-indent: 3px;
color: #fff;
}
</style>
</head>
<body>
<div class="block1" style="position: fixed; top:10px; left: 95px; background:purple;z-index: 5">fixed</div>
<div class="block2" style="position: absolute;top:10px; left: 75px; background: blue;z-index: 4">absolute</div>
<div class="block3" style="position:relative; background:yellow; top:10px; left: 50px; color:#000;z-index: 3">relative</div>
<div class="block4" style="position:inherit; background:green; margin-top: -90px;z-index: 2">inherit</div>
<div class="block5" style="position: static; background:orange; margin-top:-105px;margin-left: 25px; z-index: 1">static</div>
</body>
</html>
結果：層級由下到上：block4 > block5 > block3 > block2 > block1
· 由於block4 的 position:inherit ，即繼承父元素的static，static會忽略z-index 聲明；根據div順序：block4 > block5；
· 而fixed、absolute、relative 應用 z-index 聲明，根據z-index值，由小到大而依次層疊：block3 > block2 > block1。
設想一下，父元素設置爲 position: relative; 子元素排列順序？
結果：層級由下到上：block5 > block4 > block3 > block2 > block1
· 因爲 block4 繼承父元素的relative，z-index 有效
3、最後，來總結一下 position 、 z-index
類似成，後宮女性的地位，z-index 代表嬪妃受寵程度。
· static 默認是出生平凡的宮女，永遠處於後宮食物鏈最底層。翻牌子的托盤只有嬪妃的名字，宮女毫無受寵（z-index）可能 。
· inherit 繼承父元素，看她的父親是否達官貴族（fixed、absolute、relative），否則她也是宮女。
· fixed、absolute、relative 各類嬪妃，永遠凌駕在宮女之上，受寵程度高低（z-index）決定各自地位。