|
法則五：【重要】非同輩元素，任意一者或其祖元素?fù)碛袆?dòng)態(tài)定位時(shí)，同時(shí)各自向上尋找動(dòng)態(tài)定位的祖元素，并分別從中拿出具備最高級(jí)別的祖元素（或其本身）進(jìn)行比較。
情況1：子元素的z-index無(wú)論多大，父元素大者居上。
情況2：父元素居下，子元素也可以居上。
情況1、情況2結(jié)合擴(kuò)展比較。
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
引用:
其實(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è)例子中，我們來(lái)比較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無(wú)關(guān)，而其祖元素卻可以通過(guò)html的位置來(lái)進(jìn)行比較。
引用結(jié)束
當(dāng)然，有時(shí)候還存在特例，比如flash、比如ie6中的select無(wú)法遮住，這些都屬于異常情況，大家可以自己搜索一下相關(guān)文章。
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2924732-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2009/6663.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 層疊加的五條疊加法則 [2] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 3 頁(yè) 層疊加的五條疊加法則 [3]
