运用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之上。其他的浏览器对这个问题会进行正确的解析。

Firefox 2中的负值：

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

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

普遍应用的展示

对页面中的元素应用z-index属性可以非常便捷的解决各种各样的layout挑战，同时使得设计者可以在他们的设计中使用层叠的项目进行更多的创造。

交错的滑动门菜单：

一个对这个CSS属性实际应用的案例：CTCOnlineCME 这个网站对“正被点击”的tab使用Z-index属性及清晰交错的PNG图片，创造出非常好的效果。

上一页  [1] [2] [3] 下一页