建站
咨詢
售后
建站咨詢
新聞中心
大家好，我是年年!開始文章前，上兩道面試真題：
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信平臺(tái)小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了富順免費(fèi)建站歡迎大家使用！
- z-index值大的元素一定在值小的上面嗎?
- 如何實(shí)現(xiàn)父元素覆蓋子元素?
先公布一下答案：z-index不一定會(huì)生效，生效了也不一定是值大的在上面，主要取決于層疊上下文;給父元素設(shè)置一個(gè)很大的z-index不能實(shí)現(xiàn)覆蓋子元素，但是把子元素的z-index設(shè)置成負(fù)數(shù)卻可以滿足要求。
這兩個(gè)題的考點(diǎn)都是層疊上下文，本文會(huì)講清為什么。
顧名不難思義，層疊上下文是把元素以三維的視角，放在不同層級(jí)來判斷最后的堆疊關(guān)系，它由z-index這個(gè)屬性來決定“等級(jí)“。
如何讓z-index生效
z-index是用于規(guī)定元素在z軸的高度，其值越大，離用戶越近，越在“上面”。
使用時(shí)可能會(huì)感覺這個(gè)屬性不太聽話：給元素設(shè)置的z-index好像沒有生效，它沒有按照預(yù)期跑到其他元素上面。因?yàn)樗鼏为?dú)使用時(shí)不生效，一定要配合定位屬性一起，即只對(duì)指定了position屬性的元素生效——只要不是默認(rèn)值static，其他的absolute、relative、fixed都可以使z-index生效。
如圖1所示，在粉色的父元素下有有兩個(gè)絕對(duì)定位的子元素1和2，兩個(gè)子元素都沒有設(shè)置z-index，通過top/left屬性控制他們的位置，讓他們發(fā)生重疊，可以看到2在1的上面。因?yàn)閮烧叨紱]有設(shè)置z-index，其層疊等級(jí)都可以看作是0，同級(jí)的元素會(huì)根據(jù)其在HTML中的出現(xiàn)順序出現(xiàn)順序決定堆疊結(jié)果。
如果我們希望1在2的上面，如圖2所示，可以給元素1加上z-index:1，而沒有指定z-index的元素2的z-index依舊可以當(dāng)作0對(duì)待，按照大小關(guān)系，元素1在元素2上面了。
目前為止，都沒什么難度，不過是大小比較而已。但很多時(shí)候會(huì)發(fā)現(xiàn)，層疊結(jié)果只用單純的數(shù)值大小解釋不了：
如圖3所示，粉色背景下有兩個(gè)子元素1和2，2中有一個(gè)子元素3。三個(gè)元素都是絕對(duì)定位，其中元素3的z-index值最大，但是卻被壓在元素1下面了。
稍微修改一下，只把2號(hào)元素的的z-index去掉。如圖4所示，元素3又跑上來，蓋在1號(hào)、2號(hào)元素上面了。
要想搞懂這些問題，需要了解層疊上下文。
什么是層疊上下文
層疊上下文聽起來比較抽象，你可以把它想象成一個(gè)三維空間，這個(gè)空間內(nèi)有很多個(gè)平面。
最大的層疊上下文就是由文檔根元素——html形成的：它自身連同它的子元素就形成了一個(gè)最大的層疊上下文，也就是說，我們寫的所有代碼都是在根層疊上下文里的。
層疊上下文包含多個(gè)平面，具體來說：每個(gè)z-index的值形成一個(gè)平面，普通的無定位的塊級(jí)元素也是一個(gè)平面，浮動(dòng)元素也是一個(gè)平面，正是這些平面形成了層疊上下文。
除此之外，每個(gè)有z-index數(shù)值的元素也會(huì)連同它的子元素一起，生成一個(gè)小的層疊上下文，這個(gè)小層疊上下文和父級(jí)一樣，擁有多個(gè)平面。
去處理這些上下文時(shí)，我們可以按照從小到大的順序遞歸：先把最小的堆疊上下文中元素的順序理好，拍成一片——當(dāng)做一個(gè)整體，再與父級(jí)的堆疊上下文中其他元素比較。
不知道你有沒有見過小吃街上的甲骨文仙貝：在一個(gè)大的壓片的鍋里放上面糊，在面糊上放上一個(gè)小蝦，最后合上蓋子夾緊，變成扁扁的一小片，可以清晰的看到上面蝦的樣子。
(截圖自網(wǎng)絡(luò))
這個(gè)用來壓片的鍋就是層疊上下文，面糊、蝦就是不同層級(jí)的html元素。他們?cè)诒粔罕庵鞍凑彰鞔_的上下順序擺放，但最后都會(huì)形成薄薄的一片小餅干。這片小餅干可以被放進(jìn)一個(gè)更大的鍋里，和其他的食材，一起作為原料，繼續(xù)做成一片大餅干，但在大鍋眼里，這片小餅干誕生時(shí)是面糊在上還是蝦子在上，根本不重要，因?yàn)楝F(xiàn)在它是一個(gè)整體，只有討論這片小餅干在第二口鍋中，與其他食材的擺放順序才有意義。記住在這個(gè)模型，層級(jí)判斷就很簡(jiǎn)單了。
我們?cè)诿鎸?duì)一些難以判斷的層級(jí)關(guān)系時(shí)，可以整理出一棵“層疊上下文樹”，有點(diǎn)類似于dom樹的結(jié)構(gòu)。從小到大，把一個(gè)層疊上下文的內(nèi)的不同平面的元素堆疊好，拍平，再放到父級(jí)的堆疊上下文樹中。
下面會(huì)用幾個(gè)例子加深理解，都附有在線鏈接，可以先點(diǎn)進(jìn)去看看，試試自己能否解釋最后的呈現(xiàn)結(jié)果：
demo1
其中DOM的層級(jí)關(guān)系如下:
container1:absolute:
- 1號(hào):absolute z-index: 1
- 2號(hào):absolute z-index: 2
container2:absolute:
- 3號(hào):absolute z-index: 3
container1和container2雖然都是絕對(duì)定位，但是沒有設(shè)置z-index，不形成層疊上下文。所以只有根元素形成的這一個(gè)。
1、2、3號(hào)元素當(dāng)然也形成了層疊上下文，但是沒有子元素，所以不討論，后面的例子也一樣
形成的層疊上下文樹如下：
根層疊上下文:
- 1號(hào):absolute z-index: 1
- 2號(hào):absolute z-index: 2
- 3號(hào):absolute z-index: 3
最后的層疊關(guān)系不難判斷，從下到上是1號(hào)-2號(hào)-3號(hào)
demo2
在demo1基礎(chǔ)上稍加修改，給container1、container2加上z-index，現(xiàn)在DOM的層級(jí)關(guān)系變?yōu)椋?/p>
container1:absolute z-index: 4。
- 1號(hào):absolute z-index: 1
- 2號(hào):absolute z-index: 2
container2:absolute z-index: 1。
- 3號(hào):absolute z-index: 3
container1和container2都設(shè)置了z-index，加上根元素形成的層疊上下文，一共是三個(gè)。
形成的層疊上下文樹如下：
根層疊上下文：
- 3號(hào):absolute z-index: 3
- 1號(hào):absolute z-index: 1
- 2號(hào):absolute z-index: 2
- container1:absolute z-index: 4
- container2:absolute z-index: 1
先看container1形成的層疊上下文，此時(shí)不管它本身的z-index是多少，形成層疊上下文的元素，都在當(dāng)前這個(gè)上下文的底部，再是1號(hào)元素、2號(hào)。
然后是container2形成的層疊上下文，只有一個(gè)3號(hào)元素，沒什么好說。
最后是根層疊上下文，它眼中container1和container2是一個(gè)整體，container2在下，container1在上。
所以最后的順序從下到上是：container2(3號(hào))-container1(1號(hào)-2號(hào))。
demo3
之前的container在視覺上看不到，現(xiàn)在給它一個(gè)顏色。container2的z-index設(shè)置為0，現(xiàn)在DOM的層級(jí)關(guān)系變?yōu)椋?/p>
container1:absolute
- 1號(hào):absolute z-index: 2
container2:absolute z-index: 0
- 2號(hào):absolute z-index:-1
現(xiàn)在可以看到，從下到上分別是container1-container2-2號(hào)-1號(hào)。
這個(gè)例子比較難理解了，用層疊上下文樹分析一下，一共有兩個(gè)層疊上下文，一個(gè)是根元素形成的，另一個(gè)是container2。
根層疊上下文：
- 2號(hào):absolute z-index:-1
- container1:absolute
- 1號(hào):absolute z-index: 2
- container2:absolute z-index: 0
在container2形成的層疊上下文中，只有一個(gè)元素2，即使他的z-index是負(fù)數(shù)，也會(huì)放在container2之上，之前也說過，形成層疊上下文的元素在當(dāng)前層疊上下文中總是最底下的。我們把他們兩個(gè)拍平，合成一個(gè)整體。
在根層疊上下文中，有container1、container2和1號(hào)三個(gè)元素。container1沒有設(shè)置z-index，可以看作0，和container2層級(jí)相同，當(dāng)層級(jí)相同時(shí)，按照在html中出現(xiàn)的先后順序決定，所以是container1-container2;1號(hào)的層級(jí)最高，所以最后的層級(jí)是container1-container2-1號(hào)。
最后把container2中的其他元素展開，得到最后的層疊關(guān)系container1-container2(2號(hào))-1號(hào)。
層疊上下文規(guī)律
通過這三個(gè)例子應(yīng)該能清楚感受到什么是層疊上下文了，總結(jié)一下他的規(guī)律：
只有明確指定了z-index的值(不是auto)的定位元素才會(huì)生產(chǎn)一個(gè)層疊上下文，在這個(gè)層疊上下文中，內(nèi)部元素層級(jí)都在它之上，哪怕是負(fù)數(shù)。
如果是一個(gè)沒有指定z-index(即為auto)的定位元素，那么雖然它不能形成一個(gè)層疊上下文，但是比較層級(jí)時(shí)，和z-index:0的等級(jí)是一樣的。
如果把浮動(dòng)元素也放進(jìn)來，我們可以得到一個(gè)完整的層疊等級(jí)：
這個(gè)圖看起來復(fù)雜，其實(shí)不用背，可以一個(gè)個(gè)來看：
- 首先看塊級(jí)元素，我們寫的大部分代碼都是它，比如div，我們能看到它們，就是因?yàn)閴K級(jí)元素是在層疊上下文根元素之上的。
- 接著是浮動(dòng)元素和文字，而浮動(dòng)本身是為了實(shí)現(xiàn)環(huán)繞效果的，所以是浮動(dòng)元素和文字是同一級(jí)，這樣才不會(huì)遮擋。
- 然后是定位元素，我們知道，不指定z-index，即為auto時(shí)，是會(huì)在浮動(dòng)元素之上的，在層級(jí)關(guān)系中其實(shí)相當(dāng)于0;可以繼續(xù)推出，z-index>0的會(huì)在z-index=0之上。
- 唯一要特意記憶的是z-index<0，他的層級(jí)關(guān)系是在塊元素之下，形成層疊上下文的根元素之上的。
其中，當(dāng)多個(gè)層疊等級(jí)相同的元素重疊時(shí)，按照html中出現(xiàn)的順序決定堆疊上下關(guān)系，后出現(xiàn)的在上面。
CSS3的新特性
除了被定位的z-index元素，CSS3還提供另外的方法能生成一個(gè)層疊上下文。
特別偏門的不列舉了，意義不大，開發(fā)中可能會(huì)用到的有：
- 彈性布局的子項(xiàng)(父元素display:flex|inline-flex)，并且z-index不是auto時(shí)。
- opacity非1的元素。
- transform非none的元素。
- filter非none的元素。
這些都能生成層疊上下文，flex子元素還可以使用z-index，近一步精確設(shè)置層級(jí)，其余三個(gè)設(shè)置z-index不生效，但在比較層級(jí)關(guān)系是被當(dāng)作z-index:0對(duì)待。
結(jié)語
層疊上下文和z-index兩個(gè)概念是分不開的。一個(gè)層疊上下文是由許多擁有z-index屬性元素形成的平面構(gòu)成的;有z-index屬性的元素又會(huì)形成一個(gè)子層疊上下文。當(dāng)然，這里的z-index必須是被有效設(shè)置的，在以前是指被定位的元素——position為absolute/relative等，現(xiàn)在它還可以是flex的子元素。
在比較復(fù)雜元素的層疊順序時(shí)，主要是要整理出一棵層疊上下文樹，一個(gè)元素的層疊等級(jí)只在當(dāng)前這個(gè)層疊上下文中有意義。
回到開頭的兩個(gè)問題，答案也不難理解了。
- z-index大的元素不一定在小的元素之上。因?yàn)樗灰欢ㄉ?，通常需要是一個(gè)定位元素才生效，在CSS3之后，彈性元素的子元素也可以生效;在z-index生效之后，也不是單純的大小比較，因?yàn)檫@個(gè)數(shù)值只在當(dāng)前的層疊上下文中才有意義。
- 要實(shí)現(xiàn)父元素覆蓋子元素，去給父元素設(shè)置一個(gè)很大的z-index是沒有用的。因?yàn)檫@樣他就成為一個(gè)層疊上下文的根元素了，無論子元素被如何設(shè)置都會(huì)在這個(gè)層疊上下文根元素之上。正確的解法是把子元素的z-index設(shè)置為負(fù)數(shù)，這樣父元素是一個(gè)塊級(jí)元素，z-index<0 的子元素會(huì)在塊級(jí)元素之下，就可以實(shí)現(xiàn)我們想要的效果。
新聞標(biāo)題：抖音一面：Z-index大的元素一定在小的上面嗎？
URL標(biāo)題：http://m.5511xx.com/article/dpihdoe.html
