武林網(www.survivalescaperooms.com)文章簡介：貌似很多同學對為什么這個div在上層，那個div在下層、無論如何設置z-index都無法居上的問題糾結抓狂、上吐下瀉、惡心失眠、郁郁而終，致使不敢隨意使用層的疊加。但層的疊加效果，在交互設計中卻頻頻出現，所以我們必須駕馭它，要駕馭它，就要掌握其規律。

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

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

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

注：這些概念為作者自定義，僅用于本文。

引用:

關于同輩元素是個非常關鍵的詞，這里還需要詳細解釋一下。

<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的的元素才能叫“同輩元素”。

引用結束

接下來看看這五條法則：

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

運行代碼框

[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]