z-index

stacking context

層疊上下文(stacking context)是HTML中的一個三維的概念.若是一個元素含有層疊上下文,咱們就能夠理解爲這個元素在Z軸上就"高人一等".

Z軸表示用戶與屏幕之間並不存在的的垂直線,通俗點講,就是人眼看屏幕的視線這條垂直於屏幕的線

擁有層疊上下文的元素包括:

• 頁面根元素天生具備層疊上下文,稱之爲"根層疊上下文"

• z-index值爲數值的定位元素也具備層疊上下文

• 其餘屬性也能夠具備層疊上下文

stacking level

層疊水平(stacking level),決定了同一個層疊上下文中元素在z軸上的顯示順序

普通元素的層疊水平優先由層疊上下文決定,所以層疊水平的比較只有在當前層疊上下文元素中才有意義

須要注意的是,千萬不要把層疊水平和CSS的z-index屬性混爲一談.沒錯,某些狀況下z-index確實能夠影響層疊水平,可是隻限於定位元素以及flex/inline-flex子元素,而層疊水平全部的元素都存在

stacking order

層疊順序(stacking order)是元素髮生層疊時候有着特定的垂直顯示順序

注意,上面的層疊上下文和層疊水平是概念,而這裏的層疊順序是規則

上圖是著名的7階層疊水平(stacking level)圖

上圖的層疊順序inline/inline-block水平盒子(內容)>float浮動盒子以及block塊狀水平盒子(佈局)>background/border(裝飾),由於這樣更符合頁面加載的功能和視覺呈現

層疊順序實例

在這個例子中,inline-block屬性的紅色div,inline屬性span > float:left屬性圖片 > block屬性綠色div.可是有一點,blockdiv的文字會在inline-blockdiv背景色的上面,由於background層疊順序最低

z-index與stacking context

1. 定位元素默認z-index:auto能夠當作是z-index:0

2. z-index不爲auto的定位元素會建立層疊上下文(IE7除外,auto也會建立)

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

三個實例

在第一個例子中,應用了position:relative屬性的圖片z-index:auto,層疊順序大於普通inline-block元素,因此定位圖片覆蓋普通圖片

在第二個例子中,父容器設置position:absolute,子元素圖片設置position:relative,這時,咱們給圖片添加z-index:-1,圖片跑到背景色後面了,緣由是設置了z-index的圖片的層疊上下文元素是頁面根元素;這時,咱們再給父容器添加z-index:0,圖片的層疊上下文元素變爲父容器,此時,圖片又回到背景色之上,由於z-index:-1層疊水平在層疊上下文背景色之上

第三個例子中,雖然第一個子元素設置z-index:999999,第二個子元素z-index:-1,可是它們的層疊上下文起做用的是父元素的z-index,因此第一個圖片被第二個圖片覆蓋

其它屬性與層疊上下文

其它參與層疊上下文的屬性:

• z-index值不爲auto的flex項(父元素display:flex|inline-flex).

• 元素的opacity值不是1.

• 元素的transform值不是none.

• 元素mix-blend-mode值不是normal.

• 元素的filter值不是none.

• 元素的isolation值是isolate.

• position:fixed聲明(IE不支持)

• will-change指定的屬性值爲上面任意一個.

• 元素的-webkit-overflow-scrolling設爲touch.(移動端)

其它屬性與stacking context實例

上面的實例展現了1-8條規則,咱們設置8個div盒子,盒子裏面放置了8張圖片,而後給圖片position:relative而且z-index:-1,這時,圖片的層疊上下文元素是根層疊上下文,圖片被背景色覆蓋,而後咱們在div盒子分別使用了8條規則,盒子變爲層疊上下文,圖片出如今背景色上面

這裏有個問題,原本是8個圖片,這裏出現的只有7個,緣由是同時存在transform和position:fixed的時候position:fixed失效,致使例7圖片層疊上下文被覆蓋

z-index與其它css屬性層疊上下文

1. 不依賴z-index的層疊上下文元素的層疊順序均是z-index:auto級別

2. 依賴z-index的層疊上下文元素的層疊順序取決於z-index值

依賴z-index值建立層疊上下文的狀況:

• position值爲relative/absolute或者fixed(非IE瀏覽器)

• display:flex|inline-flex容器的子flex項

z-index與定位元素

這個例子中,咱們先設置了一個圖片層疊上下文,而後設置了一個父容器是flex,子元素z-index:1的層疊上下文;

這裏,參與比較的是第一個圖片層疊上下文,和flex的子元素圖片層疊上下文,決定層疊順序的是z-index的大小,也就是誰大誰在上面

層疊上下文致使的圖片上的文字消失現象

這個例子有個現象,當動畫在運行時,文字跑到圖片後面去了,基於前面學到的東西,當opacity不爲1時,是具備層疊上下文的,層疊級別跟z-index:auto同樣,也就是跟absolute是同級的,基於誰大誰在上面的原則,圖片會覆蓋文字

解決方法:

1. 調整DOM流前後順序,將文字放在圖片後面

2. 提升文字的層疊順序,例如z-index:1

z-index相關實踐

1.最小化影響原則

目的:避免z-index嵌套層疊關係混亂

緣由:

1. 元素的層疊水平主要由所在的層疊上下文決定;

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

作法:

1. 避免使用定位屬性;

2. 定位屬性從大容器平級分離爲私有小容器

能夠參考relative相關實踐

2.儘可能不使用z-index大於2

目的:避免z-index混亂,一個元素比一個元素z-index大的樣式問題

緣由:多人協做及後期維護

作法:
對於非浮動元素,避免設置z-index值,z-index值沒有任何須要超過2

3.組件層級計數器

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

緣由:

1. 總會遇到意想不到的高層級元素

2. 組件的覆蓋規則具備動態性,好比說一個頁面有若干個彈框

作法:經過JS得到body下子元素的最大z-index值

4.負值z-index與可訪問性隱藏

使用可訪問性隱藏來解決表單提交按鈕低版本瀏覽器兼容性問題

在本例中,可使用z-index:-1隱藏原始的submit而使用美化過的label控制提交;若是不須要兼容低版本瀏覽器能夠直接使用display:none

深刻理解CSS中的層疊上下文和層疊順序