如何理解z-index屬性

這篇文章給大家介紹如何理解z-index屬性，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

目前創(chuàng)新互聯(lián)已為千余家的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)站空間、網(wǎng)站托管、企業(yè)網(wǎng)站設計、衡陽網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

一、z-index七階層疊順序表

1.層疊順序的大小比較：

background/border < 負z-index < block塊狀水平盒子 < float浮動盒子 < inline/inline-block水平盒子 < z-index:auto或者看成z-index:0 /不依賴z-index的層疊上下文< 正z-index。

2.層疊順序級別高的元素覆蓋級別低的元素。

二、z-index與創(chuàng)建層疊上下文

1.首先要注意，z-index:auto 雖然可以看作z-index:0 ，但是這僅僅是在層疊順序的比較上；從層疊上下文上講，二者有本質(zhì)差別：auto 不會創(chuàng)建層疊上下文，z-index:0 會創(chuàng)建層疊上下文。

注意有一種特殊情況，那就是IE7下，auto也會創(chuàng)建層疊上下文，不符合標準。

2.z-index層疊順序的比較止步于父級層疊上下文

控制視圖時，如果父級元素沒有層疊上下文，則會一直找到根元素作為層疊上下文

3.z-index:數(shù)字 + 元素屬性 配合得到層疊上下文

①position:absolute/relative以及FireFox/IE下的position:fixed;

當z-index的值為auto時，元素還是普通元素，當z-index的值為具體數(shù)字時，就會創(chuàng)建層疊上下文

②z-index值不為auto的flex項（display:flex/inline-flex;）

層疊上下文元素是flex子元素，而不是flex容器元素

4.不需要與z-index:數(shù)字  配合就可以創(chuàng)建層疊上下文的屬性

①元素的opacity值不為1；

②元素的transform值不為none；

③元素mix-blend-mode（混合模式）值不為normal；

④元素的filter（css3里的濾鏡，不是指IE6/7/8/9里私有的那個濾鏡）值不為none；

⑤元素的isolation（隔離）值是isolate（元素是孤立的）

isolation:isolate這個聲明是mix-blend-mode應運而生的。 默認情況下，mix-blend-mode會混合z軸所有層疊在下面的元素，如果我們不希望某個層疊的元素參與混合就可以使用isolation:isolate。

⑥position：fixed聲明，部分瀏覽器（FireFox/IE）需要z-index:數(shù)字 配合 ⑦will-change指定的屬性值為上面任意一個

will-change的作用：增強頁面渲染性能，即準備GPU（圖形處理器）讓瀏覽器加速渲染的

什么是GPU（圖形處理器）？GPU是與處理和繪制圖形相關的硬件。 GPU是專為執(zhí)行復雜的數(shù)學和幾何計算而設計的，可以讓CPU從圖形處理的任務中解放出來，從而執(zhí)行其他更多的系統(tǒng)任務，例如，頁面的計算與重繪。

當我們通過某些行為（點擊、移動或滾動）觸發(fā)頁面進行大面積繪制的時候，瀏覽器往往是沒有準備的，只能被動使用CPU去計算與重繪，由于沒有事先準備，應付渲染夠嗆，于是掉幀，于是卡頓。而will-change則是真正的行為觸發(fā)之前告訴瀏覽器，提前預約從容不迫；突然造訪手忙腳亂。

⑧元素的-webkit-overflow-scrolling設為touch（移動端特有的原生的滾動）

5.不支持z-index層疊上下文元素的層疊順序均是z-index:auto;

6.為何定位元素會覆蓋普通元素？

例如當圖片使用了position：relative；此時圖片z-index：auto；這時圖片的的層疊順序 > 內(nèi)聯(lián)元素（普通的圖片文字是內(nèi)聯(lián)元素，層疊順序是inline/inline-block），所以會覆蓋。

三、z-index相關實踐時注意的一些原則

1.最小化影響原則

目的：避免z-index嵌套層疊關系混亂

原因：①元素的層疊水平主要由所在的層疊上下文決定

②IE7 z-index:auto;也會新建層疊上下文

做法：①避免使用定位屬性

②定位屬性從大容器平級分離為私有小容器（relative課程）

2.不犯二準則

目的：避免z-index混亂，出現(xiàn)一山比一山高的樣式問題

原因：多人協(xié)作以及后期維護

做法：對于非浮層元素，避免設置z-index值，z-index沒有任何道理需要超過2

（浮層元素：比如彈框，在頁面里拖來拖去）

3.組件層級計數(shù)器

目的：避免浮層組件因z-index背覆蓋的問題

原因：①總會遇到意想不到的高層級元素（比如其他團隊介入，或者使用網(wǎng)上的其他組件）

②組件的覆蓋規(guī)則具有動態(tài)性（比如一個頁面有好多個彈框）

做法：組件層級計數(shù)器方法：通過js獲得body下子元素的最大z-index值，

例如組件默認是m，而body最大是n（n>m），那么就把組件設置為n+1

4.可訪問性隱藏   人肉眼看不見，但是輔助設備可以識別的隱藏

z-index負值元素在層疊上下文的背景之上，其他元素之下

做法：z-index:-1;

eg：html代碼：

XML/HTML Code復制內(nèi)容到剪貼板

  1. <input type="submit" id="submit" />    

  2. <label for="submit">提交</label>   <!--label的 for關聯(lián)模擬，兼容性很好-->    

css代碼：

XML/HTML Code復制內(nèi)容到剪貼板

  1. [type=submit]{ position:absolute; z-index:-1; }    

關于如何理解z-index屬性就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

當前題目：如何理解z-index屬性
網(wǎng)址分享：http://bm7419.com/article44/jdcjee.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、用戶體驗、面包屑導航、域名注冊、服務器托管、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站