摘要：但是呢，是在的環境上下文中，因為的層級要比要高，所以的哪怕再大，實際上也依然會被給擋住的。無論其值有多小。

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;
}

下面是結果圖，我想聰明如你，一定都猜到了。

那么一個問題又來了，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;
}



  

你覺得哪個的層級最高呢？來看一下最終運行的結果把。

竟然不是.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...）。

層級上下文創建條件：

文檔根元素.

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調換一下位置呢？那么就會如下圖所示這樣。

黃色的小塊已經完全被藍色的給擋住了。不過如果是下面的代碼形式呢？

.paper1 {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: orange;
}
.paper2 {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: aqua;
  top: 0;
}

此時的話，小黃塊將會被遮擋住，無論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;
}

  

此時結果如下圖

此時的話呢，由于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...

https://www.w3.org/TR/css-pos...

張鑫旭《CSS世界》中z-index一章

本文轉載自：http://www.lht.ren/article/21/