法則一：同輩元素定位方式相同，且無z-index設定時，html靠後者居上。
法則二：同輩元素同為動態定位時，且有z-index設定時，z-index值大者居上。
法則三：同輩元素定位方式不同時，動態定位居上。
法則四：非同輩元素，任意一者及其祖元素不具備動態布局時，html靠後者居上。
引用:
其實前四點都是基礎，只有第五點比較難於理解，這裡詳細解釋一下：
在這個例子中，我們來比較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的位置來進行比較。
引用結束
經典論壇交流：
層疊加的五條疊加法則 三
法則五 重要 非同輩元素，任意一者或其祖元素擁有動態定位時，同時各自向上尋找動態定位的祖元素，並分別從中拿出具備最高端別的祖元素 或其本身 進行比較。情況1 子元素的z index無論多大，父元素大者居上。情況2 父元素居下，子元素也可以居上。情況1 情況2結合擴充套件比較。情況1 子元素的z in...
層疊加的五條疊加法則 一
參與測試的瀏覽器 ie6 ie7 ie8 ff3 op9.6 sf3 chrome2 作業系統 windows 貌似很多同學對為什麼這個div在上層，那個div在下層 無論如何設定z index都無法居上的問題糾結抓狂 上吐下瀉 噁心失眠 鬱鬱而終，致使不敢隨意使用層的疊加。但層的疊加效果，在互動設...
層疊加的5條原則
首先明確幾點在文中所需要用到的概念 靜態定位 position static 為position屬性的預設值 動態定位 position relative或position absolute或position fixed。祖元素 任意包含該元素的元素。父元素 直接包含該元素的祖元素。同輩元素 擁有共...