深入剖析z index屬性

2022-08-01 18:27:09 字數 2726 閱讀 9827

一、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與建立層疊上下文

1.首先要注意,z-index:auto 雖然可以看作z-index:0 ,但是這僅僅是在層疊順序的比較上;從層疊上下文上講,二者有本質差別:auto 不會建立層疊上下文,z-index:0 會建立層疊上下文。

注意有一種特殊情況,那就是ie7下,auto也會建立層疊上下文,不符合標準。

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

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

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

①position:absolute/relative以及firefox/ie下的position:fixed;

當z-index的值為auto時,元素還是普通元素,當z-index的值為具體數字時,就會建立層疊上下文

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

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

4.不需要與z-index:數字  配合就可以建立層疊上下文的屬性

①元素的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:數字 配合 ⑦will-change指定的屬性值為上面任意乙個

will-change的作用:增強頁面渲染效能,即準備gpu(圖形處理器)讓瀏覽器加速渲染的

什麼是gpu(圖形處理器)?gpu是與處理和繪製圖形相關的硬體。 gpu是專為執行複雜的數學和幾何計算而設計的,可以讓cpu從圖形處理的任務中解放出來,從而執行其他更多的系統任務,例如,頁面的計算與重繪。

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

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

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

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

例如當使用了position:relative;此時z-index:auto;這時的的層疊順序 > 內聯元素(普通的文字是內聯元素,層疊順序是inline/inline-block),所以會覆蓋。

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

1.最小化影響原則

目的:避免z-index巢狀層疊關係混亂

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

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

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

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

2.不犯二準則

目的:避免z-index混亂,出現一山比一山高的樣式問題

原因:多人協作以及後期維護

做法:對於非浮層元素,避免設定z-index值,z-index沒有任何道理需要超過2

(浮層元素:比如彈框,在頁面裡拖來拖去)

3.元件層級計數器

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

原因:①總會遇到意想不到的高層級元素(比如其他團隊介入,或者使用網上的其他元件)

②元件的覆蓋規則具有動態性(比如乙個頁面有好多個彈框)

做法:元件層級計數器方法:通過js獲得body下子元素的最大z-index值,

例如元件預設是m,而body最大是n(n>m),那麼就把元件設定為n+1

4.可訪問性隱藏   人肉眼看不見,但是輔助裝置可以識別的隱藏

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

做法:z-index:-1;

eg:html**:

xml/html code複製內容到剪貼簿

提交label>       

css**:

xml/html code複製內容到剪貼簿

[type=submit]    

tag:z-index屬性

border image屬性深入剖析

border image簡寫 border image source slice width outset repeat 不簡寫,單獨設定屬性,屬性如下 屬性屬性值 作用border image source xx數字 相應的border width倍數 xxpx xx fill 保留中心部分 邊界...

Vue學習 深入剖析計算屬性

有些時候,我們在模板中放入了過多的邏輯,從而導致模板過重,且難以維護。例如 碰到這樣的情況,我們必須看一段時間才能意識到,這裡是想要顯示變數message的翻轉字串,而且,一旦我們想要在模板中多次使用翻轉字串時,會更加麻煩。所以,當我們處理複雜邏輯時,都應該使用計算屬性。計算屬性是vue配置物件中的...

z index屬性簡介

z index屬性簡介 引用 z index auto number auto 預設值。number 無單位的整數值,可為負數。z index 值較大的元素將疊加在z index值較小的元素之上。對於未指定此屬性的定位物件,z index 值為正數的物件會在其之上,而z index 值為負數的物件在...