|
[參與測(cè)試的瀏覽器：IE6 / IE7 / IE8 / FF3 / OP9.6 / SF3 / Chrome2 ]
[操作系統(tǒng)：Windows]
貌似很多同學(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。
- 祖元素：任意包含該元素的元素。
- 父元素：直接包含該元素的祖元素。
- 同輩元素：擁有共同的父元素的元素。
注：這些概念為作者自定義，僅用于本文。
引用:
關(guān)于同輩元素是個(gè)非常關(guān)鍵的詞，這里還需要詳細(xì)解釋一下。
<div>
<div></div>
<div id="a"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id="f">
<div></div>
<div id="b"></div>
<div id="c"></div>
<div></div>
<div></div>
<div></div>
</div>
在這個(gè)例子中，div#a與div#b并不是“同輩元素”，只有像div#b和div#c這樣擁有同樣父體div#f的的元素才能叫“同輩元素”。
引用結(jié)束
接下來看看這五條法則：
法則一：同輩元素定位方式相同，且無z-index設(shè)置時(shí)，html靠后者居上。
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 層疊加的五條疊加法則 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 層疊加的五條疊加法則 [1]
第 2 頁 
