層疊加的五條疊加法則

[參與測試的浏覽器：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的的元素才能叫“同輩元素”。

引用結束

接下來看看這五條法則：

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

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

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

法則四：非同輩元素，任意一者及其祖元素不具備動态布局時，html靠後者居上。

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

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

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

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

來自Wang_Zemin閑的蛋疼時候寫的空間搬家工具

文章遷移自我的百度空間 o0o王澤民o0o