全透视:CSS Z-index 属性 [4]

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图片，创造出非常好的效果。

 

转载于:https://www.cnblogs.com/mcsm/articles/1866033.html