[參與測試的瀏覽器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[作業系統：Windows]
似乎很多同學對為什麼這個div在上層，那個div在下層、無論如何設置z-index都無法居上的問題糾結抓狂、上吐下瀉、噁心失眠、鬱鬱而終，致使不敢隨意使用層的疊加。但層的疊加效果，在互動設計中卻頻頻出現，所以我們必須駕馭它，要駕馭它，就要掌握其規律。
首先明確幾點在文中所需要用到的概念：
1. 靜態定位：position:static(為position屬性的預設值)。
2. 動態定位：position:relative或position:absolute或position:fixed。
3. 祖元素：任意包含該元素的元素。
4. 父元素：直接包含該元素的祖元素。
5. 同儕元素：擁有共同的父元素的元素。
【註】這些概念為作者自訂，僅用於本文。
關於同儕元素是個非常關鍵的詞，這裡還需要詳細解釋一下。
| 以下為引用的內容： <div> <div></div> <div id="a"></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="f"> <div></div> <div id="b"></div> <div id="c"></div> <div></div> <div></div> <div></div> </div> |
在這個例子中，div#a與div#b並不是“同儕元素”，只有像div#b和div#c這樣擁有同樣父體div#f的的元素才能叫“同儕元素”。