首先，強調一個知識點，z-index只有在和定位一起使用時才有用（非static的定位屬性值）。在css3中的flex中也可以使用z-index這個屬性。
這裡有一個層疊水平和層疊上下文的概念。

層疊上下文

是HTML中的一個三維概念。就感覺和“塊格式化上下文”類似，他就是一個概念。我自己覺得他就是像是因為一些特殊的屬性觸發他形成了一個新的環境的那種感覺。。這個概念比較抽象，先這麼理解把。

層疊水平

決定了同一個層疊上下文中元素在z軸上的顯示順序。
層疊順序：
background/border < 負的z-index < block塊狀水平盒子 < float浮動盒子 < inline水平盒子 < z-index:auto/z-index:0 < 正的z-index
為啥這樣排呢。
第一：背景還有border他們都是用來修飾的，所以房子最底下也情有可原。
第二：負的z-index，額，這也好理解，但是為啥不會變到背景下面呢，z-index為負的，我覺得一般也是給有用的元素上設定的，為了讓他和別的元素區分開設定的z-index，你不能讓背景搶了元素的位置呀~
第三：block和浮動元素一般是做佈局用的，佈局和內容肯定是內容要在上面呀，所以他兩必定在inline下面。但是他兩怎麼區分呢，我覺得float之後不是讓內聯元素塊狀化了嗎，但是他也只是塊狀化了！他還是比block弱一點。（自己這麼理解的）
第四：為啥z-index：auto和0比inline牛逼呢，你想啊，儘管你是內容，但是人家就是帶了這個屬性，就比你高一層。人家表達出來就比你牛掰。
第五：正的z-index很好理解，就不說了。

層疊規則

1. 誰大誰上
   當一些元素有了明顯的層疊水平標識之後，層疊水平大的覆蓋小的。
2. 後來居上
   當層疊水平一致時，後面的覆蓋前面。為啥這樣。。我覺得是js的解析順序問題吧~~~

再說一個遇到的例子：

div style="position: relative;z-index: auto">
    <img src="1.jpg" style="position: absolute;z-index: 1"/>
</div>
<div style="position: relative;z-index: auto">
    <img
 
 src="2.jpg" style="position: absolute;z-index: 1"/>
</div>

用的是張鑫旭大神的程式碼~
當父元素的層疊順序為z-index：auto時，（不能為0，只能是auto）
子元素的層疊順序按子元素本身的z-index來算
當父元素的z-index不為auto時，你就直接比較父元素層疊順序，父元素層疊順序是多少就是多少，儘管子元素的z-index大別人幾百倍，不管用，你爸爸的層疊順序低。

今天先寫這麼多，明天繼續補充