【CSS】814- 關(guān)于 z-index，你可能一直存在誤區(qū)

當(dāng)加載頁(yè)面的時(shí)候，你覺(jué)得會(huì)看到什么？

這個(gè)自然不用多想，引入眼簾的肯定是一大片的藍(lán)色，同時(shí)還有一個(gè)此前設(shè)置好尺寸的紅色塊級(jí)元素。除非你做了額外的設(shè)置，否則這個(gè)元素將正常地出現(xiàn)在左上角。

你可能會(huì)說(shuō)“就這？太簡(jiǎn)單了吧”，不過(guò)有一個(gè)問(wèn)題可能不那么簡(jiǎn)單：為什么紅色的塊級(jí)元素就一定會(huì)位于藍(lán)色背景的上層呢？為什么我們看到的就是 div 位于 html 的上層呢？原因是，它們都遵循了層疊順序的規(guī)則。

在這個(gè)簡(jiǎn)單的例子中，根據(jù)規(guī)則，正常文檔流的子塊（div）的層級(jí)將會(huì)高于根元素（html）的背景和邊框。我們看到div 位于頂層，這是因?yàn)樗膶盈B等級(jí)更高。

雖然上面這個(gè)例子只涉及到了兩個(gè)層疊等級(jí)，但實(shí)際上，在一個(gè)層疊上下文中，一共可能出現(xiàn)七個(gè)層疊等級(jí)，從最低到最高排列，依次是：

1. 背景和邊框 ：形成層疊上下文的元素的背景和邊框，它是整個(gè)上下文中層疊等級(jí)最低的。
2. Z-Index 為負(fù)數(shù) ：設(shè)置了 z-index 為負(fù)數(shù)的子元素以及由它所產(chǎn)生的層疊上下文
3. 塊級(jí)盒模型：位于正常文檔流中的、塊級(jí)的、非定位的子元素
4. 浮動(dòng)盒模型 ：浮動(dòng)的、非定位的子元素
5. 內(nèi)聯(lián)盒模型 ：位于正常文檔流中的、內(nèi)聯(lián)的、非定位的子元素
6. Z-index 為 0：設(shè)置了 z-index 為 0 的、定位的子元素以及由它所產(chǎn)生的層疊上下文
7. Z-Index 為正數(shù) ：設(shè)置了 z-index 為正數(shù)的、定位的子元素以及由它所產(chǎn)生的層疊上下文，它是整個(gè)上下文中層疊等級(jí)最高的

這七個(gè)層疊等級(jí)就構(gòu)成了層疊順序的規(guī)則。符合層疊等級(jí)七的元素，會(huì)比層疊等級(jí)在一到六的元素更“貼近我們”，符合層疊等級(jí)五的元素，會(huì)比層疊等級(jí)二的元素更“貼近我們”，以此類推。

第一次學(xué)習(xí)這些層疊規(guī)則的時(shí)候，我感覺(jué)收獲了很多新的東西。如果只著眼于層疊等級(jí)二、六和七（也就是涉及到 z-index 的等級(jí)），那么大部分時(shí)候，我們對(duì)于 z-index 的理解是正確的。正的 z-index 的層級(jí)比 0 要高，而 0 又比負(fù)的要高，一切都符合直覺(jué)，可能大多數(shù)人到這里就不繼續(xù)往后探究了。

我之前就是這樣，在看到這些規(guī)則之前，以為除了正的和負(fù)的 z-index ，其它情況都可以看作是 z-index 為0 —— 不過(guò)現(xiàn)在我們很清楚了，這種想法是錯(cuò)誤的。事實(shí)是，大部分元素的層級(jí)都要低于 z-index:0。

還有一個(gè)有趣的細(xì)節(jié)是，非定位的元素實(shí)際位于四種不同的層疊等級(jí)中。乍一想覺(jué)得很奇怪，不過(guò)其實(shí)這是很合理的。假設(shè)所有的非定位元素都位于同一個(gè)層疊等級(jí)，那么我們就沒(méi)辦法在 div （塊級(jí)盒）上看到文本（內(nèi)聯(lián)盒）了。

來(lái)看個(gè)案例

我前面提到過(guò)很多次，當(dāng)你給一個(gè)元素設(shè)置非 auto 的 z-inde 時(shí)，會(huì)創(chuàng)建一個(gè)新的、完全獨(dú)立的層疊上下文。

重新回顧一下之前拿桌子做比喻的案例。一開(kāi)始的時(shí)候，我們的桌子上擺滿了四塊磚頭，上面是一個(gè)玻璃杯，再上面是一個(gè)水果盤(pán)。現(xiàn)在，假設(shè)又有一張新的桌子，它擺放的東西和舊桌子差不多，唯一的不同是，新桌子少了一個(gè)水果盤(pán)。

不難想象，舊桌子的水果盤(pán)是整個(gè)房間中位于最頂層的物品（它有最大的 z-index），不過(guò)，如果把舊桌子以及它上面的所有東西整體搬到地下室呢？此時(shí)，水果盤(pán)的層級(jí)會(huì)比新桌子上的每一個(gè)物品都要低，這是因?yàn)?，放置水果盤(pán)的舊桌子整體已經(jīng)低于新桌子了。

對(duì)于網(wǎng)頁(yè)上的定位元素來(lái)說(shuō)，其實(shí)道理是一樣的。假設(shè)有如下代碼，思考一個(gè)問(wèn)題：div.two 和 div.four，哪個(gè)在上哪個(gè)在下？

HTML:

<div?class="one">
??<div?class="two">div>
??<div?class="three">div>
div>
<div?class="four">div>

CSS:

div?{
??width:?200px;
??height:?200px;
??padding:?20px;
}
?
.one,?.two,?.three,?.four?{
??position:?absolute;
}
??
.one?{
??background:?#f00;
??outline:?5px?solid?#000;
??top:?100px;
??left:?200px;
??z-index:?10;
}
??
.two?{
??background:?#0f0;
??outline:?5px?solid?#000;
??top:?50px;
??left:?75px;
??z-index:?100;
}
?
.three?{
??background:?#0ff;
??outline:?5px?solid?#000;
??top:?125px;
??left:?25px;
??z-index:?150;
}
?
.four?{
??background:?#00f;
??outline:?5px?solid?#ff0;
??top:?200px;
??left:?350px;
??z-index:?50;
}

盡管 div.two 有更高的 z-index（100），但在頁(yè)面上，它的層級(jí)實(shí)際上比 div.four （z-index 為50）要低。下圖就是頁(yè)面元素的層級(jí)情況，根據(jù)黑色和黃色邊框，我們可以區(qū)分每個(gè)元素生成的不同的層疊上下文。

由于 div.two ?位于 div.one 中，所以它的 z-index 是和 div.one 的層疊上下文相關(guān)的，也就是說(shuō)，實(shí)際表現(xiàn)出來(lái)的 z-index 是下面這樣的：

• .one —— z-index = 10
• .two —— z-index = 10.100
• .three —— z-index = 10.150
• .four —— z-index = 50

div.one 和內(nèi)部包含的一切將會(huì)在層級(jí)上低于 div.four，無(wú)論給 ?div.one 的子元素設(shè)置多大的 z-index，子元素的層級(jí)都無(wú)法超過(guò) div.four。

看到這個(gè)例子是不是有一種熟悉的味道？我也曾經(jīng)被 z-index 這么坑過(guò)一兩次。我們都曾疑惑一個(gè)問(wèn)題，為什么一個(gè) z-index 非常大的元素，在層級(jí)上始終無(wú)法超過(guò)一個(gè) z-index 比它小很多的元素？相信在學(xué)習(xí)了這些案例之后，你已經(jīng)豁然開(kāi)朗了。

總結(jié)

在最初學(xué)習(xí) z-index 的時(shí)候，我們都會(huì)認(rèn)為它很簡(jiǎn)單，這不就是代表元素在 z 軸上的位置嗎？不過(guò)我們現(xiàn)在知道了，事情遠(yuǎn)沒(méi)有這么簡(jiǎn)單。深入理解 z-index^[9] 一文也揭示了 z-index 背后一些原理層面的東西，包括層疊上下文，層疊等級(jí)以及一系列決定元素的層疊順序的規(guī)則。

最后，記住一個(gè)很重要的結(jié)論：定位元素可以創(chuàng)建新的層疊上下文，在這個(gè)上下文中的所有層疊等級(jí)，都會(huì)高于或者低于另一個(gè)層疊上下文的所有層疊等級(jí)。

拓展閱讀

• What No One Told You About Z-Index by Philip Walton
• The Z-Index CSS Property: A Comprehensive Look on Smashing Magazine
• How Well Do You Understand CSS Positioning?
• The stacking context on Mozilla Developer Network
• Z-Index And The CSS Stack: Which Element Displays First?

參考資料