摘要：但是呢，是在的環(huán)境上下文中，因?yàn)榈膶蛹?jí)要比要高，所以的哪怕再大，實(shí)際上也依然會(huì)被給擋住的。無(wú)論其值有多小。

z-index是咱們之前相對(duì)比較常用的一個(gè)語(yǔ)法了，看起來(lái)比較簡(jiǎn)單的樣子，實(shí)際上還真不難，因?yàn)檫@東西跟之前講的vertical-align不一樣，這個(gè)比較符合咱們的認(rèn)知。

好了，不廢話，開(kāi)始咱們的正式話題。

首先呢？咱們先要了解一下層疊上下文（stack context）是什么呢，其實(shí)通俗來(lái)講，就是你看電腦的這個(gè)方向的一個(gè)顯示順序，比如說(shuō)，桌子上有一大堆紙，你對(duì)著它看的話，每一張紙，實(shí)際上你就可以理解為一個(gè)層疊上下文中的一個(gè)層疊順序（stack level），你能看到的，往往是最靠前的那幾張紙，后面的都被遮擋住了。

那么，首先最簡(jiǎn)單的一點(diǎn)。如果有有一摞的完全重合的值，你能看到的，往往都是最靠上的那張紙，也就是離你眼睛最近的那一張。然而對(duì)于咱們的z-index來(lái)說(shuō)呢，值越大，也就相當(dāng)于離你眼睛越近。在紙張里的位置越靠上。 所以說(shuō)，下面的代碼，你應(yīng)該一看就能知道，哪個(gè)元素在哪個(gè)元素的前面。

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

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

那么一個(gè)問(wèn)題又來(lái)了，z-index大的，一定會(huì)遮蓋住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;
}



  

你覺(jué)得哪個(gè)的層級(jí)最高呢？來(lái)看一下最終運(yùn)行的結(jié)果把。

竟然不是.paper3在最上面，他似乎被.paper1給擋住了，按理來(lái)說(shuō)，不是z-index越大的，層級(jí)越高嗎？出現(xiàn)這種情況到底是為什么呢？

實(shí)際上，當(dāng)z-index不為auto的時(shí)候，會(huì)自動(dòng)創(chuàng)建一個(gè)它自己的層級(jí)上下文，也就是說(shuō)，paper1和paper2是同級(jí)的，他們都在根環(huán)境上下文上。但是paper3呢，是在paper2的環(huán)境上下文中，因?yàn)閜aper1的層級(jí)要比paper2要高，所以paper3的z-index哪怕再大，實(shí)際上也依然會(huì)被paper1給擋住的。

那么，問(wèn)題又來(lái)了，只有z-index不為auto時(shí)才會(huì)創(chuàng)建環(huán)境上下文嗎？答案肯定是否定的，實(shí)際上，咱們平時(shí)用到的不少css屬性，也會(huì)自動(dòng)創(chuàng)建環(huán)境上下文，下面咱們就看下mdn對(duì)這一塊所列出來(lái)的一些屬性（本文更新自2019.3.25，如果看到此文時(shí)已經(jīng)過(guò)了好幾個(gè)月，甚至是一兩年，推薦看英mdn頁(yè)面：https://developer.mozilla.org...）。

層級(jí)上下文創(chuàng)建條件：

文檔根元素.

position值為absolute或者是relative，并且z-index值不為auto.

position的值為fixed或者是sticky（適用于所有的移動(dòng)端瀏覽器，但是老舊的電腦端瀏覽器并不支持）

flex容器的子元素，其z-index值不為auto;

opacity的值小于1

mix-blend-mode的屬性值不為normal

下面屬性的值不為none時(shí):

????????transform

????????filter

???????? perspective、

????????clip-path

???????? mask / mask-image / mask-border

isolation的值為isolate

-webkit-overflow-scrolling的值為touch時(shí)

will-change

contain的值為layout, paint或者是一個(gè)包含他們中任意一個(gè)的組合值（比如contain: strict, contain:
content）

看了上面的列表，應(yīng)該會(huì)明白為什么我用z-index的時(shí)候，都會(huì)加position: absolute了吧。

那么，如果z-index值相同時(shí)，會(huì)怎么顯示呢？實(shí)際上，他會(huì)按照先后順序，后面的會(huì)覆蓋前面的。如下面的例子：

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

結(jié)果圖如下：

那么如果此時(shí)吧兩個(gè)div調(diào)換一下位置呢？那么就會(huì)如下圖所示這樣。

黃色的小塊已經(jīng)完全被藍(lán)色的給擋住了。不過(guò)如果是下面的代碼形式呢？

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

此時(shí)的話，小黃塊將會(huì)被遮擋住，無(wú)論paper1在paper2的前面和后面，最后的結(jié)果都依然是一樣的。如下圖所示

但是呢，假如給.paper1加入一個(gè)transform:scale(1)的話，他就會(huì)顯示出來(lái)，依然會(huì)按照先后順序，后面的先展示。

那么，為什么會(huì)這樣呢？

首先呢？在一個(gè)層疊上下文中，實(shí)際上里面不同的元素是有不同的層疊順序的，實(shí)際上下圖已經(jīng)很好的說(shuō)明了這一點(diǎn)，其從下往上依次為

background/border->負(fù)z-index->block塊狀水平盒子->float浮動(dòng)元素->inline水平盒子->z-index:auto或者是z-index: 0->正z-index。

這個(gè)和咱們平時(shí)開(kāi)發(fā)的表現(xiàn)是一致的。但是請(qǐng)注意z-index:auto和z-index: 0;的層級(jí)。他實(shí)際上是在inline水平元素的上面，因?yàn)槎ㄎ辉兀约吧厦嫠谐鰜?lái)的css3的標(biāo)簽，很多都是默認(rèn)的z-index: auto; 所以上上個(gè)例子中，絕對(duì)定位的元素，始終會(huì)覆蓋其inline-block元素。但是呢，其inline-block元素由于新加了transform: scale(1)以后呢，實(shí)際上會(huì)默認(rèn)一個(gè)z-index: auto; 所以他們倆實(shí)際上層級(jí)就一致了，因此他們也就是遵循后來(lái)居上的一個(gè)規(guī)則。誰(shuí)在后面，誰(shuí)就在靠上的位置。

同理，如果兩個(gè)元素分別為z-index: 0和z-index: auto; 的話，他們倆也遵循后來(lái)居上的規(guī)則，他們倆唯一的區(qū)別，就是z-index: 0會(huì)新建一個(gè)層疊上下文，而z-index: auto;則不會(huì);

另外，許多css3屬性中，比如說(shuō)雖然transform默認(rèn)是z-index: auto，但是其實(shí)際上也會(huì)新建層疊上下文，所以，這塊的話，你自己理解為有上面列出來(lái)的css3屬性時(shí)，默認(rèn)附帶了一個(gè)z-index: 0就可以了。

當(dāng)然了，我再寫(xiě)一個(gè)關(guān)于負(fù)z-index的例子，作為大家的一個(gè)小練習(xí)。不過(guò)我相信有了上面的鋪墊后，這個(gè)對(duì)于大家來(lái)說(shuō)，應(yīng)該就沒(méi)有很大的問(wèn)題了

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

  

此時(shí)結(jié)果如下圖

此時(shí)的話呢，由于paper2的z-index為-1，由于paper1和paper2都在一個(gè)層疊上下文內(nèi)（root），因此呢，paper2就自然的在paper1下面。也就如上圖所示。

但是如果給.paper1增加了一個(gè)tranform: scale(1)呢，情況就會(huì)變得不太一樣，如下圖所示：

實(shí)際上就是因?yàn)樵黾恿藅ransform: scale(1)以后，實(shí)際上在paper1里面新建了一個(gè)層疊上下文，所以由于paper2是在paper1的層疊上下文里，所以它自然就顯示出來(lái)了。無(wú)論其z-index值有多小。

好了，上面講的也差不多了，不過(guò)依然是為了方便大家的理解，在最后，我簡(jiǎn)單的說(shuō)一下其原理吧。

首先呢，其渲染樹(shù)是一個(gè)深度優(yōu)先的樹(shù)結(jié)構(gòu)，然后呢，先渲染的實(shí)際上會(huì)比后渲染的層級(jí)要更高一些，這個(gè)就跟咱們用不同的涂料刷墻一樣，后刷的顏色總是會(huì)覆蓋先刷的那些顏色，實(shí)際上網(wǎng)站渲染也是類似的。同時(shí)呢，在同級(jí)的時(shí)候，后面的要比前面的層級(jí)更高，實(shí)際上也是由于其遍歷方式?jīng)Q定的，這個(gè)我就不多說(shuō)了。

好了，完事了，謝謝大家觀看，有什么問(wèn)題想探討的，或者我有什么錯(cuò)誤遺漏的地方，都?xì)g迎留言給我，謝謝大家

覺(jué)得不錯(cuò)的話，可以關(guān)注微信公眾號(hào)：干活技術(shù)，每周都有一篇前端相關(guān)原創(chuàng)干貨小文章分享

推薦閱讀：

https://developers.google.com...

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

張?chǎng)涡瘛禖SS世界》中z-index一章

本文轉(zhuǎn)載自：http://www.lht.ren/article/21/