武林網web開發(fā)網為大家整理了這篇一篇講解CSS中z-index用法與方式的全面解析，如果這篇文章在您的工作或學習中有幫助，歡迎常回來看看哦，更多精彩的教程請訪問我們的主頁,以下是教程瀏覽：

z-index全解析

Z-index屬性決定了一個HTML元素的層疊級別。
元素層疊級別是相對于元素在Z軸上（與X軸Y軸相對照）的位置而言。
一個更高的Z-index值意味著這個元素在疊層順序中會更靠近頂部。這個層疊順序沿著垂直的線軸被呈現。

在一個HTML頁面中，自然的層疊順序（也就是元素在Z軸上的順序）是由很多因素決定的：

• 具有負值的stacking contexts(層疊環(huán)境)元素，按照出現的先后順序排列（越靠后層級越靠上）;
• 沒有被定位，沒有浮動的塊級元素，按照出現的先后順序排列;
• 沒有被定位，浮動的元素，按照出現的先后順序排列;
• 內聯元素，按照出現的先后順序排列排列;
• 被定位的元素，按照出現的先后順序排列;
• Z-index 屬性，當被正確使用的時候，會改變自然的層疊順序。

01.順序規(guī)則

如果不對節(jié)點設定 position 屬性, 位于文檔流后面的節(jié)點會遮蓋前面的節(jié)點.

A

B

02.定位規(guī)則

A:如果將 position 設為 static(positon默認值), 位于文檔流后面的節(jié)點依然會遮蓋前面的節(jié)點浮動, 不會影響節(jié)點的遮蓋關系.

A<

B

B:如果將 position 設為 relative (相對定位), absolute (絕對定位) 或者 fixed (固定定位), 這樣的節(jié)點會覆蓋沒有設置 position 屬性或者屬性為 static 的節(jié)點, 因為前者比后者的默認層級高.

A

B

C:在沒有 z-index 屬性干擾的情況下, 根據這順序規(guī)則和定位規(guī)則, 可以做出復雜的結構: 這里 A 和 B 都不設定 position, 但對 A 的子節(jié)點 A-1 設定 position:relative. 根據順序規(guī)則, B 會覆蓋 A, 又根據定位規(guī)則 A-1 會覆蓋 B.

A-1

B

03.參與規(guī)則

在不用 position 屬性的情況下, 為節(jié)點加上 z-index 屬性是不起作用的.

A

B

C

04.默認值規(guī)則

*注: 當 position 設為 relative, absolute 或者 fixed, 而沒有設置 z-index 時, IE8 以上和 W3C 瀏覽器的 z-index 默認值是 auto, 但 IE6 和 IE7 是 0.

如果所有節(jié)點都定義了 position:relative. z-index 為 0 的節(jié)點與沒有定義 z-index 在同一層級內沒有高低之分;
但 z-index 大于等于 1 的節(jié)點會遮蓋沒有定義 z-index 的節(jié)點;
z-index 的值為負數的節(jié)點將被沒有定義 z-index 的節(jié)點覆蓋.

A

B

C

D

05.從父規(guī)則

*注: 很多人將 z-index 設得很大, 9999 什么的都出來了, 如果不考慮父節(jié)點的影響, 設得再大也沒用, 那是無法逾越的層級.

A:如果 A, B 節(jié)點都定義了 position:relative, A 節(jié)點的 z-index 比 B 節(jié)點大, 那么 A 的子節(jié)點必定覆蓋在 B 的子節(jié)點前面.

A-1

B-1

B:如果所有節(jié)點都定義了 position:relative, A 節(jié)點的 z-index 和 B 節(jié)點一樣大,
因為順序規(guī)則, B 節(jié)點覆蓋在 A 節(jié)點前面. 就算 A 的子節(jié)點 z-index 值比 B 的子節(jié)點大, B 的子節(jié)點還是會覆蓋在 A 的子節(jié)點前面.

A-1

B-1

06.層級樹規(guī)則

可能你會覺得在 DOM 結構中的兄弟節(jié)點會拎出來進行比較并確定層級, 其實不然.

A-1

B-1

我們認為同時將 position 設為 relative, absolute 或者 fixed, 并且 z-index 經過整數賦值的節(jié)點,
會被放置到一個與 DOM 不一樣的層級樹里面, 并且在層級樹中通過對比 z-index 決定顯示的層級.
上面的例子如果用層級樹來表示的話, 應該如下圖所示.

圖中雖然 A-1 (z-index:0) 的值比 B-1 (z-index:1) 小, 但因為在層級樹里 A (z-index:2) 和 B-1 在一個層級, 而 A 的值比 B-1 大, 根據從父規(guī)則, A-1 顯示在 B-1 前面.

07.參與規(guī)則二

A:前面提到的參與規(guī)則認為只要節(jié)點的 position 屬性為 relative, absolute 或者 fixed, 即可參與層級比較,
其實不準確. 如果所有節(jié)點都定義了 position:relative, 并且將 z-index 設為整數值, 根據從父規(guī)則, 父節(jié)點的層級決定了子節(jié)點所在層級.

A-1

B-1-1

C-1-1-1

例子中 A, B-1, C-1-1 作為父節(jié)點, z-index 的值相同, 根據順序規(guī)則, C-1-1 在 B-1 之前, B-1 在 A 之前; 又根據從父規(guī)則, 無論子節(jié)點的 z-index 值是什么, C-1-1-1 在 B-1-1 之前, B-1-1 在 A-1 之前.

B:如果我們將所有父節(jié)點的 z-index 屬性去除, 詭異的事情發(fā)生了. IE6 和 IE7 瀏覽器顯示效果不變, 而 W3C 瀏覽器的子節(jié)點不再從父, 而是根據自身的 z-index 確定層級.

A-1

B-1-1

C-1-1-1

根據默認值規(guī)則, IE6 / IE7 和 W3C 瀏覽器上的元素存在 z-index 默認值的區(qū)別.
僅當 position 設為 relative, absolute 或者 fixed, 并且 z-index 賦整數值時, 節(jié)點被放置到層級樹;
而 z-index 為默認值時, 只在 document 兄弟節(jié)點間比較層級. 在 W3C 瀏覽器中, A, B-1 和 C-1-1 的 z-index 均為 auto, 不參與層級比較.

而在 IE6 和 IE7 中, 因為 z-index 的默認值是 0, 所以也參與了層級比較.

C:設置了 position 而沒有 z-index 的節(jié)點雖然不參與層級樹的比較, 但還會在 DOM 中與兄弟節(jié)點進行層級比較.

A-1

B-1-1

C-1-1-1

我們對上個例子改造一下, 將 B-1 的 position 屬性刪除后, W3C 瀏覽器顯示如下圖. 根據定位規(guī)則, A 和 C-1-1 會顯示在 B-1 的前面; 而根據順序規(guī)則, C-1-1 又顯示在 A 前面.

在 IE6 和 IE7 中, 因為 A 和 C-1-1 設置了 position:relative, 而且 z-index 的默認值為 0, 所以也參與層級樹比較, 所以有如下效果.

總結：在運用z-index之前，最好先將各個模塊的 position, z-index 和層級的關系梳理清楚, 以免后患無窮.z-index運用的好可以解決很多遮罩效果；

一篇講解CSS中z-index用法與方式的全面解析文章就講到這里，歡迎瀏覽本站的其它內容，點擊這里返回首頁