大家好，我是年年!開始文章前，上兩道面試真題：

1. z-index值大的元素一定在值小的上面嗎?
2. 如何實現(xiàn)父元素覆蓋子元素?

先公布一下答案：z-index不一定會生效，生效了也不一定是值大的在上面，主要取決于層疊上下文;給父元素設置一個很大的z-index不能實現(xiàn)覆蓋子元素，但是把子元素的z-index設置成負數(shù)卻可以滿足要求。

這兩個題的考點都是層疊上下文，本文會講清為什么。

顧名不難思義，層疊上下文是把元素以三維的視角，放在不同層級來判斷最后的堆疊關系，它由z-index這個屬性來決定“等級“。

如何讓z-index生效

z-index是用于規(guī)定元素在z軸的高度，其值越大，離用戶越近，越在“上面”。

使用時可能會感覺這個屬性不太聽話：給元素設置的z-index好像沒有生效，它沒有按照預期跑到其他元素上面。因為它單獨使用時不生效，一定要配合定位屬性一起，即只對指定了position屬性的元素生效——只要不是默認值static，其他的absolute、relative、fixed都可以使z-index生效。

如圖1所示，在粉色的父元素下有有兩個絕對定位的子元素1和2，兩個子元素都沒有設置z-index，通過top/left屬性控制他們的位置，讓他們發(fā)生重疊，可以看到2在1的上面。因為兩者都沒有設置z-index，其層疊等級都可以看作是0，同級的元素會根據(jù)其在HTML中的出現(xiàn)順序出現(xiàn)順序決定堆疊結(jié)果。

如果我們希望1在2的上面，如圖2所示，可以給元素1加上z-index:1，而沒有指定z-index的元素2的z-index依舊可以當作0對待，按照大小關系，元素1在元素2上面了。

目前為止，都沒什么難度，不過是大小比較而已。但很多時候會發(fā)現(xiàn)，層疊結(jié)果只用單純的數(shù)值大小解釋不了：

如圖3所示，粉色背景下有兩個子元素1和2，2中有一個子元素3。三個元素都是絕對定位，其中元素3的z-index值最大，但是卻被壓在元素1下面了。

稍微修改一下，只把2號元素的的z-index去掉。如圖4所示，元素3又跑上來，蓋在1號、2號元素上面了。

要想搞懂這些問題，需要了解層疊上下文。

什么是層疊上下文

層疊上下文聽起來比較抽象，你可以把它想象成一個三維空間，這個空間內(nèi)有很多個平面。

最大的層疊上下文就是由文檔根元素——html形成的：它自身連同它的子元素就形成了一個最大的層疊上下文，也就是說，我們寫的所有代碼都是在根層疊上下文里的。

層疊上下文包含多個平面，具體來說：每個z-index的值形成一個平面，普通的無定位的塊級元素也是一個平面，浮動元素也是一個平面，正是這些平面形成了層疊上下文。

除此之外，每個有z-index數(shù)值的元素也會連同它的子元素一起，生成一個小的層疊上下文，這個小層疊上下文和父級一樣，擁有多個平面。

去處理這些上下文時，我們可以按照從小到大的順序遞歸：先把最小的堆疊上下文中元素的順序理好，拍成一片——當做一個整體，再與父級的堆疊上下文中其他元素比較。

不知道你有沒有見過小吃街上的甲骨文仙貝：在一個大的壓片的鍋里放上面糊，在面糊上放上一個小蝦，最后合上蓋子夾緊，變成扁扁的一小片，可以清晰的看到上面蝦的樣子。

(截圖自網(wǎng)絡)

這個用來壓片的鍋就是層疊上下文，面糊、蝦就是不同層級的html元素。他們在被壓扁之前按照明確的上下順序擺放，但最后都會形成薄薄的一片小餅干。這片小餅干可以被放進一個更大的鍋里，和其他的食材，一起作為原料，繼續(xù)做成一片大餅干，但在大鍋眼里，這片小餅干誕生時是面糊在上還是蝦子在上，根本不重要，因為現(xiàn)在它是一個整體，只有討論這片小餅干在第二口鍋中，與其他食材的擺放順序才有意義。記住在這個模型，層級判斷就很簡單了。

我們在面對一些難以判斷的層級關系時，可以整理出一棵“層疊上下文樹”，有點類似于dom樹的結(jié)構。從小到大，把一個層疊上下文的內(nèi)的不同平面的元素堆疊好，拍平，再放到父級的堆疊上下文樹中。

下面會用幾個例子加深理解，都附有在線鏈接，可以先點進去看看，試試自己能否解釋最后的呈現(xiàn)結(jié)果：

demo1

其中DOM的層級關系如下:

container1:absolute:

• 1號:absolute z-index: 1
• 2號:absolute z-index: 2

container2:absolute:

• 3號:absolute z-index: 3

container1和container2雖然都是絕對定位，但是沒有設置z-index，不形成層疊上下文。所以只有根元素形成的這一個。

1、2、3號元素當然也形成了層疊上下文，但是沒有子元素，所以不討論，后面的例子也一樣

形成的層疊上下文樹如下：

根層疊上下文:

• 1號:absolute z-index: 1
• 2號:absolute z-index: 2
• 3號:absolute z-index: 3

最后的層疊關系不難判斷，從下到上是1號-2號-3號

demo2

在demo1基礎上稍加修改，給container1、container2加上z-index，現(xiàn)在DOM的層級關系變?yōu)椋?/p>

container1:absolute z-index: 4。

• 1號:absolute z-index: 1
• 2號:absolute z-index: 2

container2:absolute z-index: 1。

• 3號:absolute z-index: 3

container1和container2都設置了z-index，加上根元素形成的層疊上下文，一共是三個。

形成的層疊上下文樹如下：

根層疊上下文：

• 3號:absolute z-index: 3
• 1號:absolute z-index: 1
• 2號:absolute z-index: 2
• container1:absolute z-index: 4
• container2:absolute z-index: 1

先看container1形成的層疊上下文，此時不管它本身的z-index是多少，形成層疊上下文的元素，都在當前這個上下文的底部，再是1號元素、2號。

然后是container2形成的層疊上下文，只有一個3號元素，沒什么好說。

最后是根層疊上下文，它眼中container1和container2是一個整體，container2在下，container1在上。

所以最后的順序從下到上是：container2(3號)-container1(1號-2號)。

demo3

之前的container在視覺上看不到，現(xiàn)在給它一個顏色。container2的z-index設置為0，現(xiàn)在DOM的層級關系變?yōu)椋?/p>

container1:absolute

• 1號:absolute z-index: 2

container2:absolute z-index: 0

• 2號:absolute z-index:-1

現(xiàn)在可以看到，從下到上分別是container1-container2-2號-1號。

這個例子比較難理解了，用層疊上下文樹分析一下，一共有兩個層疊上下文，一個是根元素形成的，另一個是container2。

根層疊上下文：

• 2號:absolute z-index:-1
• container1:absolute
• 1號:absolute z-index: 2
• container2:absolute z-index: 0

在container2形成的層疊上下文中，只有一個元素2，即使他的z-index是負數(shù)，也會放在container2之上，之前也說過，形成層疊上下文的元素在當前層疊上下文中總是最底下的。我們把他們兩個拍平，合成一個整體。

在根層疊上下文中，有container1、container2和1號三個元素。container1沒有設置z-index，可以看作0，和container2層級相同，當層級相同時，按照在html中出現(xiàn)的先后順序決定，所以是container1-container2;1號的層級最高，所以最后的層級是container1-container2-1號。

最后把container2中的其他元素展開，得到最后的層疊關系container1-container2(2號)-1號。

層疊上下文規(guī)律

通過這三個例子應該能清楚感受到什么是層疊上下文了，總結(jié)一下他的規(guī)律：

只有明確指定了z-index的值(不是auto)的定位元素才會生產(chǎn)一個層疊上下文，在這個層疊上下文中，內(nèi)部元素層級都在它之上，哪怕是負數(shù)。

如果是一個沒有指定z-index(即為auto)的定位元素，那么雖然它不能形成一個層疊上下文，但是比較層級時，和z-index:0的等級是一樣的。

如果把浮動元素也放進來，我們可以得到一個完整的層疊等級：

這個圖看起來復雜，其實不用背，可以一個個來看：

1. 首先看塊級元素，我們寫的大部分代碼都是它，比如div，我們能看到它們，就是因為塊級元素是在層疊上下文根元素之上的。
2. 接著是浮動元素和文字，而浮動本身是為了實現(xiàn)環(huán)繞效果的，所以是浮動元素和文字是同一級，這樣才不會遮擋。
3. 然后是定位元素，我們知道，不指定z-index，即為auto時，是會在浮動元素之上的，在層級關系中其實相當于0;可以繼續(xù)推出，z-index>0的會在z-index=0之上。
4. 唯一要特意記憶的是z-index<0，他的層級關系是在塊元素之下，形成層疊上下文的根元素之上的。

其中，當多個層疊等級相同的元素重疊時，按照html中出現(xiàn)的順序決定堆疊上下關系，后出現(xiàn)的在上面。

CSS3的新特性

除了被定位的z-index元素，CSS3還提供另外的方法能生成一個層疊上下文。

特別偏門的不列舉了，意義不大，開發(fā)中可能會用到的有：

1. 彈性布局的子項(父元素display:flex|inline-flex)，并且z-index不是auto時。
2. opacity非1的元素。
3. transform非none的元素。
4. filter非none的元素。

這些都能生成層疊上下文，flex子元素還可以使用z-index，近一步精確設置層級，其余三個設置z-index不生效，但在比較層級關系是被當作z-index:0對待。

結(jié)語

層疊上下文和z-index兩個概念是分不開的。一個層疊上下文是由許多擁有z-index屬性元素形成的平面構成的;有z-index屬性的元素又會形成一個子層疊上下文。當然，這里的z-index必須是被有效設置的，在以前是指被定位的元素——position為absolute/relative等，現(xiàn)在它還可以是flex的子元素。

在比較復雜元素的層疊順序時，主要是要整理出一棵層疊上下文樹，一個元素的層疊等級只在當前這個層疊上下文中有意義。

回到開頭的兩個問題，答案也不難理解了。

1. z-index大的元素不一定在小的元素之上。因為它不一定生效，通常需要是一個定位元素才生效，在CSS3之后，彈性元素的子元素也可以生效;在z-index生效之后，也不是單純的大小比較，因為這個數(shù)值只在當前的層疊上下文中才有意義。
2. 要實現(xiàn)父元素覆蓋子元素，去給父元素設置一個很大的z-index是沒有用的。因為這樣他就成為一個層疊上下文的根元素了，無論子元素被如何設置都會在這個層疊上下文根元素之上。正確的解法是把子元素的z-index設置為負數(shù)，這樣父元素是一個塊級元素，z-index<0 的子元素會在塊級元素之下，就可以實現(xiàn)我們想要的效果。