z-index是咱們之前相對比較常用的一個文法了，看起來比較簡單的樣子，實際上還真不難，因為這東西跟之前講的vertical-align不一樣，這個比較符合咱們的認知。
好了，不廢話，開始咱們的正式話題。
首先呢？咱們先要了解一下層疊上下文（stack context）是什麼呢，其實通俗來講，就是你看電腦的這個方向的一個顯示順序，比如說，桌子上有一大堆紙，你對着它看的話，每一張紙，實際上你就可以了解為一個層疊上下文中的一個層疊順序（stack level），你能看到的，往往是最靠前的那幾張紙，後面的都被遮擋住了。
那麼，首先最簡單的一點。如果有有一摞的完全重合的值，你能看到的，往往都是最靠上的那張紙，也就是離你眼睛最近的那一張。然而對于咱們的z-index來說呢，值越大，也就相當于離你眼睛越近。在紙張裡的位置越靠上。 是以說，下面的代碼，你應該一看就能知道，哪個元素在哪個元素的前面。
.paper1 {
position: absolute;
background-color: orange;
z-index: 2;
width: 100px;
height: 100px;
}
.paper2 {
position: absolute;
background-color: gray;
z-index: 5;
width: 50px;
height: 50px;
}
<div class="paper1"></div>
<div class="paper2"></div>
下面是結果圖，我想聰明如你，一定都猜到了。
那麼一個問題又來了，z-index大的，一定會遮蓋住z-index小的嗎？不廢話，直接看下面的代碼。
.paper1 {
position: absolute;
width: 100px;
height: 100px;
background: orange;
z-index: 3;
}
.paper2 {
position: absolute;
width: 200px;
height: 200px;
background-color: aqua;
z-index: 2;
}
.paper3 {
position: absolute;
top: 80px;
width: 50px;
height: 50px;
background-color: red;
z-index: 4;
}
<div class="paper1"></div>
<div class="paper2">
<div class="paper3"></div>
</div>
你覺得哪個的層級最高呢？來看一下最終運作的結果把。
竟然不是.paper3在最上面，他似乎被.paper1給擋住了，按理來說，不是z-index越大的，層級越高嗎？出現這種情況到底是為什麼呢？
實際上，當z-index不為auto的時候，會自動建立一個它自己的層級上下文，也就是說，paper1和paper2是同級的，他們都在根環境上下文上。但是paper3呢，是在paper2的環境上下文中，因為paper1的層級要比paper2要高，是以paper3的z-index哪怕再大，實際上也依然會被paper1給擋住的。
那麼，問題又來了，隻有z-index不為auto時才會建立環境上下文嗎？答案肯定是否定的，實際上，咱們平時用到的不少css屬性，也會自動建立環境上下文，下面咱們就看下mdn對這一塊所列出來的一些屬性（本文更新自2019.3.25，如果看到此文時已經過了好幾個月，甚至是一兩年，推薦看英mdn頁面：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context）。
層級上下文建立條件：
- 文檔根元素.
- position值為absolute或者是relative，并且z-index值不為auto.
- position的值為fixed或者是sticky（适用于所有的移動端浏覽器，但是老舊的電腦端浏覽器并不支援）
- flex容器的子元素，其z-index值不為auto;
- opacity的值小于1
- mix-blend-mode的屬性值不為normal
- 下面屬性的值不為none時:
transform
filter
perspective、
clip-path
mask / mask-image / mask-border
- isolation的值為isolate
- -webkit-overflow-scrolling的值為touch時
- will-change
-
contain的值為layout, paint或者是一個包含他們中任意一個的組合值（比如contain: strict, contain:
content）
看了上面的清單，應該會明白為什麼我用z-index的時候，都會加position: absolute了吧。
那麼，如果z-index值相同時，會怎麼顯示呢？實際上，他會按照先後順序，後面的會覆寫前面的。如下面的例子：
.paper1 {
position: absolute;
width: 100px;
height: 100px;
background: orange;
z-index: 2;
}
.paper2 {
position: absolute;
width: 200px;
height: 200px;
background-color: aqua;
z-index: 2;
}
<div class="paper2"></div>
<div class="paper1"></div>
結果圖如下：
那麼如果此時吧兩個div調換一下位置呢？那麼就會如下圖所示這樣。
黃色的小塊已經完全被藍色的給擋住了。不過如果是下面的代碼形式呢？
.paper1 {
display: inline-block;
width: 100px;
height: 100px;
background: orange;
}
.paper2 {
position: absolute;
width: 200px;
height: 200px;
background-color: aqua;
top: 0;
}
<div class="paper1"></div>
<div class="paper2"></div>
此時的話，小黃塊将會被遮擋住，無論paper1在paper2的前面和後面，最後的結果都依然是一樣的。如下圖所示
但是呢，假如給.paper1加入一個transform:scale(1)的話，他就會顯示出來，依然會按照先後順序，後面的先展示。
那麼，為什麼會這樣呢？
首先呢？在一個層疊上下文中，實際上裡面不同的元素是有不同的層疊順序的，實際上下圖已經很好的說明了這一點，其從下往上依次為
background/border->負z-index->block塊狀水準盒子->float浮動元素->inline水準盒子->z-index:auto或者是z-index: 0->正z-index。
這個和咱們平時開發的表現是一緻的。但是請注意z-index:auto和z-index: 0;的層級。他實際上是在inline水準元素的上面，因為定位元素，以及上面所列出來的css3的标簽，很多都是預設的z-index: auto; 是以上上個例子中，絕對定位的元素，始終會覆寫其inline-block元素。但是呢，其inline-block元素由于新加了transform: scale(1)以後呢，實際上會預設一個z-index: auto; 是以他們倆實際上層級就一緻了，是以他們也就是遵循後來居上的一個規則。誰在後面，誰就在靠上的位置。
同理，如果兩個元素分别為z-index: 0和z-index: auto; 的話，他們倆也遵循後來居上的規則，他們倆唯一的差別，就是z-index: 0會建立一個層疊上下文，而z-index: auto;則不會;
另外，許多css3屬性中，比如說雖然transform預設是z-index: auto，但是其實際上也會建立層疊上下文，是以，這塊的話，你自己了解為有上面列出來的css3屬性時，預設附帶了一個z-index: 0就可以了。
當然了，我再寫一個關于負z-index的例子，作為大家的一個小練習。不過我相信有了上面的鋪墊後，這個對于大家來說，應該就沒有很大的問題了
.paper1 {
display: inline-block;
width: 100px;
height: 100px;
background: orange;
}
.paper2 {
position: absolute;
width: 50px;
height: 50px;
background-color: aqua;
top: 0;
z-index: -1;
}
<div class="paper1">
<div class="paper2"></div>
</div>
此時結果如下圖
此時的話呢，由于paper2的z-index為-1，由于paper1和paper2都在一個層疊上下文内（root），是以呢，paper2就自然的在paper1下面。也就如上圖所示。
但是如果給.paper1增加了一個tranform: scale(1)呢，情況就會變得不太一樣，如下圖所示：
實際上就是因為增加了transform: scale(1)以後，實際上在paper1裡面建立了一個層疊上下文，是以由于paper2是在paper1的層疊上下文裡，是以它自然就顯示出來了。無論其z-index值有多小。
好了，上面講的也差不多了，不過依然是為了友善大家的了解，在最後，我簡單的說一下其原理吧。
首先呢，其渲染樹是一個深度優先的樹結構，然後呢，先渲染的實際上會比後渲染的層級要更高一些，這個就跟咱們用不同的塗料刷牆一樣，後刷的顔色總是會覆寫先刷的那些顔色，實際上網站渲染也是類似的。同時呢，在同級的時候，後面的要比前面的層級更高，實際上也是由于其周遊方式決定的，這個我就不多說了。
好了，完事了，謝謝大家觀看，有什麼問題想探讨的，或者我有什麼錯誤遺漏的地方，都歡迎留言給我，謝謝大家
覺得不錯的話，可以關注微信公衆号：幹活技術，每周都有一篇前端相關原創幹貨小文章分享
推薦閱讀：
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction https://www.w3.org/TR/css-position-3/#layered-presentation張鑫旭《CSS世界》中z-index一章
轉載自：
http://www.lht.ren/article/21/