-
[參與測試的瀏覽器：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設定時，html靠後者居上。法則二 同輩元素同為動態定位時，且有z index設定時，z index值大者居上。法則三 同輩元素定位方式不同時，動態定位居上。法則四 非同輩元素，任意一者及其祖元素不具備動態布局時，html靠後者居上。引用 其實前四點都...
層疊加的五條疊加法則 三
法則五 重要 非同輩元素，任意一者或其祖元素擁有動態定位時，同時各自向上尋找動態定位的祖元素，並分別從中拿出具備最高端別的祖元素 或其本身 進行比較。情況1 子元素的z index無論多大，父元素大者居上。情況2 父元素居下，子元素也可以居上。情況1 情況2結合擴充套件比較。情況1 子元素的z in...
層疊加的5條原則
首先明確幾點在文中所需要用到的概念 靜態定位 position static 為position屬性的預設值 動態定位 position relative或position absolute或position fixed。祖元素 任意包含該元素的元素。父元素 直接包含該元素的祖元素。同輩元素 擁有共...