亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解CSS中的z-index屬性在層疊布局中的用法

neoease   發(fā)布時間：2016-03-05 11:31:51   作者：吳釗   我要評論
這篇文章主要介紹了CSS中的z-index屬性在層疊布局中的用法,詳細地講解了各種常用的層疊規(guī)則,非常推薦!需要的朋友可以參考下

z-index的重要性

在我看來，z-index 給了我們?nèi)粘９ぷ髦幸詷O大的幫助，我們用它來定義元素的層疊級別（stack level）。受益于它，你能做Popup, DropDown, Tips, 圖文替換等等。

在開始本篇之前，或許我們要先了解一下關(guān)于z-index的基本信息。

W3C這樣描述

每個元素都具有三維空間位置，除了水平和垂直位置外，還能在 "Z軸" 上層層相疊、排列。元素在 "Z軸" 方向上的呈現(xiàn)順序，由層疊上下文和層疊級別決定。

在文檔中，每個元素僅屬于一個層疊上下文。元素的層疊級別為整型，它描述了在相同層疊上下文中元素在 "Z軸" 上的呈現(xiàn)順序。

同一層疊上下文中，層疊級別大的顯示在上，層疊級別小的顯示在下，相同層疊級別時，遵循后來居上的原則，即其在HTML文檔中的順序。

不同層疊上下文中，元素呈現(xiàn)順序以父級層疊上下文的層疊級別來決定呈現(xiàn)的先后順序，與自身的層疊級別無關(guān)。


順序規(guī)則

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

XML/HTML Code復制內(nèi)容到剪貼板
  1. <div id="a">A</div>  
  2. <div id="b">B</div>  

201635113637630.gif (185×110)
定位規(guī)則

如果將 position 設(shè)為 static, 位于文檔流后面的節(jié)點依然會遮蓋前面的節(jié)點浮動, 所以 position:static 不會影響節(jié)點的遮蓋關(guān)系.

CSS Code復制內(nèi)容到剪貼板
  1. <div id="a" style="position:static;">A</div>   
  2. <div id="b">B</div>  

201635113659818.gif (185×110)

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

CSS Code復制內(nèi)容到剪貼板
  1. <div id="a" style="position:relative;">A</div>   
  2. <div id="b">B</div>  

201635113725062.gif (185×110)

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

CSS Code復制內(nèi)容到剪貼板
  1. <div id="a">   
  2.  <div id="a-1" style="position:relative;">A-1</div>   
  3. </div>   
  4. <div id="b">B</div>  

201635113749540.gif (185×110)

上面互相覆蓋在什么時候用到這樣的實現(xiàn)? 看起來偏門, 其實很常用, 比如說, 電子商務(wù)網(wǎng)站側(cè)欄的類目展示列表就可以用這個技巧來實現(xiàn).

下圖是某網(wǎng)站的類目展示區(qū)域, 二級類目的懸浮層覆蓋一級類目列表外框, 而一級類目的節(jié)點覆蓋二級類目的懸浮層. 如果使用 CSS 實現(xiàn)展示效果, 一級類目的外框相當于上面例子中的 A, 一級類目的節(jié)點相當于 A-1, 二級類目的懸浮層相當于 B.
201635113808487.jpg (600×270)

參與規(guī)則

我們嘗試不用 position 屬性, 但為節(jié)點加上 z-index 屬性. 發(fā)現(xiàn) z-index 對節(jié)點沒起作用.

CSS Code復制內(nèi)容到剪貼板
  1. <div id="a" style="z-index:2;">A</div>   
  2. <div id="b" style="z-index:1;">B</div>   
  3. <div id="c" style="z-index:0;">C</div>  

201635113845149.gif (185×160)

W3C 對 z-index 屬性的描述中提到 在 z-index 屬性僅在節(jié)點的 position 屬性為 relative, absolute 或者 fixed 時生效.

The z-index property specifies the stack order of an element. Only works on positioned elements(position: absolute;, position: relative; or position: fixed;).

CSS Code復制內(nèi)容到剪貼板
  1. <div id="a" style="z-index:2;">A</div>   
  2. <div id="b" style="position:relative;z-index:1;">B</div>   
  3. <div id="c" style="position:relative;z-index:0;">C</div>  

201635113905520.gif (185×160)

默認值規(guī)則

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

CSS Code復制內(nèi)容到剪貼板
  1. <div id="a" style="position:relative;z-index:1;">A</div>   
  2. <div id="b" style="position:relative;z-index:0;">B</div>   
  3. <div id="c" style="position:relative;">C</div>   
  4. <div id="d" style="position:relative;z-index:0;">D</div>  

201635113928769.gif (185×185)

通過檢查我們還發(fā)現(xiàn), 當 position 設(shè)為 relative, absolute 或者 fixed, 而沒有設(shè)置 z-index 時, IE8 以上和 W3C 瀏覽器 (下文我們統(tǒng)稱為 W3C 瀏覽器) 的 z-index 默認值是 auto, 但 IE6 和 IE7 是 0.

從父規(guī)則

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

CSS Code復制內(nèi)容到剪貼板
  1. <div id="a" style="position:relative;z-index:1;">   
  2.  <div id="a-1">A-1</div>   
  3. </div>   
  4.     
  5. <div id="b" style="position:relative;z-index:0;">   
  6.  <div id="b-1">B-1</div>   
  7. </div>  

201635113947738.gif (185×200)

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

CSS Code復制內(nèi)容到剪貼板
  1. <div id="a" style="position:relative;z-index:0;">   
  2.  <div id="a-1" style="position:relative;z-index:2;">A-1</div>   
  3. </div>   
  4.     
  5. <div id="b" style="position:relative;z-index:0;">   
  6.  <div id="b-1" style="position:relative;z-index:1;">B-1</div>   
  7. </div>  

201635114006807.gif (185×200)

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

層級樹規(guī)則

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

CSS Code復制內(nèi)容到剪貼板
  1. <div id="a" style="position:relative;z-index:2;">   
  2.  <div id="a-1" style="position:relative;z-index:0;">A-1</div>   
  3. </div>   
  4.     
  5. <div id="b">   
  6.  <div id="b-1" style="position:relative;z-index:1;">B-1</div>   
  7. </div>  

201635114023678.gif (185×200)

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

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

參與規(guī)則 2

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

CSS Code復制內(nèi)容到剪貼板
  1. <div id="a" style="position:relative;z-index:0;">   
  2.  <div id="a-1" style="position:relative;z-index:100;">A-1</div>   
  3. </div>   
  4.     
  5. <div id="b">   
  6.  <div id="b-1" style="position:relative;z-index:0;">   
  7.   <div id="b-1-1" style="position:relative;z-index:10;">B-1-1</div>   
  8.  </div>   
  9. </div>   
  10.     
  11. <div id="c" style="position:relative;z-index:0;">   
  12.  <div id="c-1">   
  13.   <div id="c-1-1">   
  14.    <div id="c-1-1-1" style="position:relative;z-index:1;">C-1-1-1</div>   
  15.   </div>   
  16.  </div>   
  17. </div>  

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

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

CSS Code復制內(nèi)容到剪貼板
  1. <div id="a" style="position:relative;">   
  2.  <div id="a-1" style="position:relative;z-index:100;">A-1</div>   
  3. </div>   
  4.     
  5. <div id="b">   
  6.  <div id="b-1" style="position:relative;">   
  7.   <div id="b-1-1" style="position:relative;z-index:10;">B-1-1</div>   
  8.  </div>   
  9. </div>   
  10.     
  11. <div id="c" style="position:relative;">   
  12.  <div id="c-1">   
  13.   <div id="c-1-1">   
  14.    <div id="c-1-1-1" style="position:relative;z-index:1;">C-1-1-1</div>   
  15.   </div>   
  16.  </div>   
  17. </div>  

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

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

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

CSS Code復制內(nèi)容到剪貼板
  1. <div id="a" style="position:relative;">   
  2.  <div id="a-1" style="position:relative;z-index:100;">A-1</div>   
  3. </div>   
  4.     
  5. <div id="b">   
  6.  <div id="b-1">   
  7.   <div id="b-1-1" style="position:relative;z-index:10;">B-1-1</div>   
  8.  </div>   
  9. </div>   
  10.     
  11. <div id="c" style="position:relative;">   
  12.  <div id="c-1">   
  13.   <div id="c-1-1">   
  14.    <div id="c-1-1-1" style="position:relative;z-index:1;">C-1-1-1</div>   
  15.   </div>   
  16.  </div>   
  17. </div>  

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

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

總結(jié)

瀏覽器節(jié)點顯示層級是一個費力的活, 今天你覺得 A 區(qū)塊會永遠置頂, 但明天因為需求變動, 突然出現(xiàn) B 元素需要置頂. 一層一層往上堆砌, 某天回頭一看, 發(fā)現(xiàn)很多區(qū)塊交錯在一起, 而且他們的值一個比一個大, 根本搞不清頭緒. 我覺得在操刀干活之前, 最好先將 position, z-index 和層級的關(guān)系搞搞清楚, 以免后患無窮.

另外, 非情非得已, 切勿用 JavaScript 計算 z-index, 并將某個節(jié)點的 z-index 設(shè)置成所有節(jié)點中層級最高.

因為篇幅太長, 本文僅從節(jié)點屬性角度進行討論, 沒有涉及 select 和 iframe 等特殊頁面節(jié)點考慮, 如果有機會下次再為大家分享.

相關(guān)文章

最新評論