層疊加的五條疊加法則

作者：Eve Cole 更新時間：2009-06-12 17:53:18

[參與測試的瀏覽器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[作業系統：Windows]

似乎很多同學對為什麼這個div在上層，那個div在下層、無論如何設置z-index都無法居上的問題糾結抓狂、上吐下瀉、噁心失眠、鬱鬱而終，致使不敢隨意使用層的疊加。但層的疊加效果，在互動設計中卻頻頻出現，所以我們必須駕馭它，要駕馭它，就要掌握其規律。

首先明確幾個在文中所需要用到的概念：

靜態定位：position:static（為position屬性的預設值）。
動態定位：position:relative或position:absolute或position:fixed。
祖元素：任意包含該元素的元素。
父元素：直接包含該元素的祖元素。
同儕元素：擁有共同的父元素的元素。

註：這些概念為作者自訂，僅用於本文。

引用:

關於同儕元素是個非常關鍵的詞，這裡還需要詳細解釋一下。

在這個例子中，div#a與div#b並不是“同儕元素”，只有像div#b和div#c這樣擁有同樣父體div#f的元素才能叫“同儕元素”。

引用結束

接下來看看這五條法則：

法則一：同輩元素定位方式相同，且無z-index設定時，html靠後者居上。

法則二：同輩元素同為動態定位時，且有z-index設定時，z-index值大者居上。

法則三：同儕元素定位方式不同時，動態定位居上。

法則四：非同儕元素，任一者及其祖元素不具備動態佈局時，html靠後者居上。

法則五：【重要】非同儕元素，任一者或其祖元素擁有動態定位時，同時各自向上尋找動態定位的祖元素，並分別從中拿出具備最高級別的祖元素（或其本身）進行比較。

情況1：子元素的z-index無論多大，父元素大者居上。

情況2：父元素居下，子元素也可以居上。

情況1、情況2結合擴展比較。

運行程式碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="author" content="Chomo" /> <link rel="start" href="http://www.14px.com" title="Home" /> <title>法則五：非同輩元素，任一者或其祖當元素擁有動態定位時，同時各自向上尋找動態定位的祖元素，並分別從中拿出具備最高等級的祖元素（或其本身）進行比較。 </title> </head> <style type="text/css"> div { font:12px/1.5 arial;} div strong { color:#fff; background:#036; display:inline-block;} h3 strong { color:#f00;} /*--- 定義方塊外形---*/ .div1, .div2 { height:70px; width:150px; background:#cff; border:1px solid #036; } .grandDiv1, .grandDiv2 { padding:10px; border:1px solid #060; width:174px; background:#cf9; } .parentDiv1, .parentDiv2 { padding:10px; border:1px solid #f06; widne } /*--- 定義方塊偏移位置、文字位置---*/ .grandDiv2 { margin-top:-50px; margin-left:95px; } .parentDiv2 { margin-top:-40px; margin-left: 85px; } .div2 { margin-top:-20px; margin-left:75px; padding-top:30px; height:40px; } .grandDiv2 .parentDiv2, .grandDiv2 .div2, .parentDivgin; </style> <body> <h3>法則五<strong>（重要）</strong>：非同儕元素，當任一者或其祖元素擁有動態定位時，同時各自向上尋找動態定位的祖元素至共有的祖元素的下一級為止，並分別從中拿出具備最高等級的祖元素（或其本身）進行比較。 </h3> <p>情況1：子元素的z-index無論多大，父元素大者居上。 <p> <div class="parentDiv1" style="position:relative; z-index:2;"> .parentDiv1{position:relative;<strong>z-index:2</strong>} <div class=" div1">.div1{position:static}</div> </div> <div class="parentDiv2" style="position:relative; z-index:1;"> <div class="div2" style=" position:relative; z-index:10000;">.div2{position:relative;<strong>z-index:10000</strong>}</div> .parentDiv2{position:relative;<strong>z-index: 1</strong>} </div> <p>情況2：父元素居下，子元素也可以居上。 <p> <div class="parentDiv1"> .parentDiv1{position:staitc} <div class="div1" style="position:relative;">.div1{position:relative}</div> </div> < div class="parentDiv2"> <div class="div2">.div2{position:staitc}</div> .parentDiv2{position:staitc} </div> <p>情況1、情況2結合擴展比較。 <p> <div class="grandDiv1" style="position:relative; z-index:3;"> .grandDiv1{position:relative;<strong>z-index:3</strong>} <div class=" parentDiv1"> .parentDiv1{position:staitc} <div class="div1" style="position:relative; z-index:10000;">.div1{position:relative;<strong>z-index:10000</strong >}</div> </div> </div> <div class="grandDiv2"> <div class="parentDiv2" style="position:relative; z-index:4;"> <div class="div2 ">.div2{position:staitc}</div> .parentDiv2{position:relative;<strong>z-index:4</strong>} </div> .grandDiv2{position:static;} </div> < /body></html>
[Ctrl+A 全部選擇提示：你可先修改部分程式碼]

引用:

其實前四點都是基礎，只有第五點比較難於理解，這裡詳細解釋一下：

在這個例子中，我們來比較div#a_inner5和div#b_inner4的層疊關係。
到它們所共同擁有的祖元素div#ab的下一級為止，div#a_inner5的祖元素包括：div#a,div#a_inner1,div#a_inner2,div#a_inner3,div#a_inner4；div#b_inner4的祖元素包括：div#b,div#b_inner1,div#b_inner2,div#b_inner3。
接著分析它們的祖元素中具有動態定位的：div#a_inner5的祖元素中含有動態定位的元素有：div#a,div#a_inner3；div#b_inner4的祖元素中含有動態定位的元素有：div# b_inner3。
然後再拿出最高級做比較：div#a > #div#b_inner3。

父元素居下，子元素也可以居上的情況，則是利用非同儕元素在祖元素具備動態佈局時，其比較已經與position:static無關，而其祖元素卻可以透過html的位置來進行比較。

引用結束

當然，有時候還存在特例，例如flash、例如ie6中的select無法遮住，這些都屬於異常情況，大家可以自己搜尋一下相關文章。