|
運(yùn)用JavaScript
如果你希望通過(guò)JavaScript為一個(gè)元素動(dòng)態(tài)的加上Z-index 屬性，其語(yǔ)法同其他大部分CSS元素能被存取類似，就是使用“駝峰命名法”取代CSS屬性中的連字符，就像下面的代碼展現(xiàn)的那樣。
var myElement = document.getElementById(”gold_box”);
myElement.style.position = “relative”;
myElement.style.zIndex = “9999″;
在IE 和 Firefox中的不當(dāng)解析（兼容性問題）
在某些特定的情況下，關(guān)于Z-index 屬性的解析會(huì)在IE6、IE7以及Firefox2版本中存在一些小小的前后矛盾。
IE中的<select>元素：
IE6中的<select>元素是一個(gè)窗口控件，所以它總是出現(xiàn)在層疊順序的頂部而不會(huì)顧及到自然層疊順序、position屬性或者是Z-index。下圖展示的就是這個(gè)問題。
<select>元素出現(xiàn)在了頂部，它被設(shè)置了“相對(duì)定位”并且Z-index值為“1”。金色的BOX在這個(gè)層疊順序中排在了第二位，它的Z-index值是“9999”。因?yàn)樽匀粚盈B順序及Z-index值的原因，在我們目前所用的所有瀏覽器中金色的BOX都會(huì)排在頂部，但I(xiàn)E6除外。
這個(gè)IE6的BUG導(dǎo)致了很多覆蓋在<select>元素上的下拉菜單在彈出下拉選項(xiàng)時(shí)失敗的問題。一個(gè)解決辦法是使用JavaScript臨時(shí)隱藏<select>元素，等到下拉菜單的下拉項(xiàng)收回時(shí)再將<select>顯示出來(lái)。其他的辦法會(huì)涉及到使用<iframe>。
IE6/IE7中被定位了的父容器：
因父容器（元素）被定位的緣故，IE6/7會(huì)錯(cuò)誤的對(duì)其stacking context進(jìn)行重置。為了演示這個(gè)多少有些復(fù)雜的BUG，我們?cè)僖淮蔚姆胖脙蓚�(gè)BOX，但這次我們會(huì)將第一個(gè)BOX放置在一個(gè)被定位了的元素里。
灰色BOX的z-index值是“9999”；藍(lán)色BOX的z-index值是“1”，這兩個(gè)BOX都被設(shè)置了position。所以，正確的執(zhí)行應(yīng)該是灰色的BOX覆蓋在藍(lán)色的之上。
但是在IE6和IE7中，我們卻會(huì)看到藍(lán)色的BOX處于灰色的之上。這是由灰色BOX外層的父容器也被設(shè)置了定位造成的。這兩款瀏覽器錯(cuò)誤的將被定位的父容器的stacking context進(jìn)行了“重置”，但卻不應(yīng)該這樣�；疑腂OX擁有一個(gè)非常高的Z-index值，它理應(yīng)因?yàn)樘幵谒{(lán)色BOX之上。其他的瀏覽器對(duì)這個(gè)問題會(huì)進(jìn)行正確的解析。 （我之前有一篇《z-index 屬性之IE/FF下同性不同貌》的博文，里面涉及的就是這個(gè)BUG）
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 全透視:CSS Z-index 屬性 [2] 下一頁(yè) 全透視:CSS Z-index 屬性 [4]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 3 頁(yè) 全透視:CSS Z-index 屬性 [3]
