全透视：CSS Z-index 属性（4）

运用JavaScript

如果你希望通过JavaScript为一个元素动态的加上Z-index 属性，其语法同其他大部分CSS元素能被存取类似，就是使用“驼峰命名法”取代CSS属性中的连字符，就像下面的代码展现的那样。

var myElement = document.getElementById(”gold_box”);  
myElement.style.position = “relative”;  
myElement.style.zIndex = “9999″;

在IE 和 Firefox中的不当解析（兼容性问题）

在某些特定的情况下，关于Z-index 属性的解析会在IE6、IE7以及Firefox2版本中存在一些小小的前后矛盾。

IE中的<select>元素

IE6中的<select>元素是一个窗口控件，所以它总是出现在层叠顺序的顶部而不会顾及到自然层叠顺序、position属性或者是Z-index。下图展示的就是这个问题。

<select>元素出现在了顶部，它被设置了“相对定位”并且Z-index值为“1”。金色的BOX在这个层叠顺序中排在了第二位，它的Z-index值是“9999”。因为自然层叠顺序及Z-index值的原因，在我们目前所用的所有浏览器中金色的BOX都会排在顶部，但IE6除外。

这个IE6的BUG导致了很多覆盖在<select>元素上的下拉菜单在弹出下拉选项时失败的问题。一个解决办法是使用JavaScript临时隐藏<select>元素，等到下拉菜单的下拉项收回时再将<select>显示出来。其他的办法会涉及到使用<iframe>。

IE6/IE7中被定位了的父容器

因父容器（元素）被定位的缘故，IE6/7会错误的对其stacking context进行重置。为了演示这个多少有些复杂的BUG，我们再一次的放置两个BOX，但这次我们会将第一个BOX放置在一个被定位了的元素里。

灰色BOX的z-index值是“9999”；蓝色BOX的z-index值是“1”，这两个BOX都被设置了position。所以，正确的执行应该是灰色的BOX覆盖在蓝色的之上。

但是在IE6和IE7中，我们却会看到蓝色的BOX处于灰色的之上。这是由灰色BOX外层的父容器也被设置了定位造成的。这两款浏览器错误的将被定位的父容器的stacking context进行了“重置”，但却不应该这样。灰色的BOX拥有一个非常高的Z-index值，它理应因为处在蓝色BOX之上。其他的浏览器对这个问题会进行正确的解析。 （我之前有一篇《z-index 属性之IE/FF下同性不同貌》的博文，里面涉及的就是这个BUG）

Firefox 2中的负值

在Firefox2版本中，一个负的Z-index值会使元素位于stacking context的后面，而不是位于公认的背景和边框这样的元素stacking context之前。下面的截图展示了这个Firefox 2的BUG。

下面的是上面截图的HTML版本（限于目前博客所限，做不到能够像Smashing Magazine那样的内容部分显示code demo，需要查看原始实例请去原文章查看），如果你在Firefox 3或者其他目前正在被使用的浏览器中查看，你会看到正常的解析结果：灰色BOX的背景（元素stacking context的基底）出现在所有实物的下面，并且灰色BOX内部的文字出现在蓝色BOX的上面。