z-index 元素顺序 - 后宫甄嬛
先提三个问题：
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）决定各自地位。