css層的定位position、absolute、relative層疊加的五條疊加法則

css層的定位position、absolute、relative層疊加的五條疊加法則

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

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

靜態定位：position:static（為position屬性的預設值）。
動態定位：position:relative或position:absolute或position:fixed。
祖元素：任意包含該元素的元素。
父元素：直接包含該元素的祖元素。
同輩元素：擁有共同的父元素的元素。

註：這些概念為作者自訂，僅用於本文。

接下來看看這五條法則:

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

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

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

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

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

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

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

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

引用:
其實前四點都是基礎，只有第五點比較難於理解，這裡詳細解釋一下：

<div id="ab" style="position:absolute;">
<div id="a" style="position:relative; z-index:100;">
<div id="a_inner1">
<div id="a_inner2">
<div id="a_inner3" style="position:relative; z-index:98;">
<div id="a_inner4">
<div id="a_inner5">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="b">
<div id="b_inner1">
<div id="b_inner2">
<div id="b_inner3" style="position:relative; z-index:99;">
<div id="b_inner4">
</div>
</div>
</div>
</div>
</div>
</div>

在這個例子中，我們來比較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的位置來進行比較。