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

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

首先明確幾點(diǎn)在文中所需要用到的概念:

靜態(tài)定位：position:static（為position屬性的默認(rèn)值）。
動(dòng)態(tài)定位：position:relative或position:absolute或position:fixed。
祖元素：任意包含該元素的元素。
父元素：直接包含該元素的祖元素。
同輩元素：擁有共同的父元素的元素。

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

接下來看看這五條法則:

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

法則二：同輩元素同為動(dòng)態(tài)定位時(shí)，且有z-index設(shè)置時(shí)，z-index值大者居上。

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

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

情況1、情況2結(jié)合擴(kuò)展比較:

引用:
其實(shí)前四點(diǎn)都是基礎(chǔ)，只有第五點(diǎn)比較難于理解，這里詳細(xì)解釋一下：

<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>

在這個(gè)例子中，我們來比較div#a_inner5和div#b_inner4的層疊關(guān)系。
到它們所共同擁有的祖元素 div#ab的下一級(jí)為止，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。
然后分析它們的祖元素中具有動(dòng)態(tài)定位的：div#a_inner5的祖元素中含有動(dòng)態(tài)定位的元素有：div#a,div#a_inner3；div#b_inner4的祖元素中含有動(dòng)態(tài)定位的元素有：div#b_inner3。
然后再拿出最高級(jí)進(jìn)行比較：div#a > #div#b_inner3。

父元素居下，子元素也可以居上的情況，則是利用非同輩元素在祖元素具備動(dòng)態(tài)布局時(shí)，其比較已經(jīng)與position:static無關(guān)，而其祖元素卻可以通過html的位置來進(jìn)行比較。

• css
• position
• 定位