全透视：CSS Z-index 属性

普遍应用的展示

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

交错的滑动门菜单

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

CSS气泡

Z-index 属性还可以用来实现基于CSS的提示气泡，就像下面trentrichardson.com展示的那样

LightBox

如果不是因为应用了z-index 属性，现在也不会有那么多的品质优秀的Light Box脚本可以免费使用，比如说JQuery的一个插件FancyBox。

Light box 脚本使用半透明的PNG图片来使背景变暗，之后拿来一个新的元素，经常会使用类似窗口的DIV，将之放置在前排。覆盖住屏幕的PNG和之后的DIV都使用Z-index 属性以确保这2个元素会位于页面其他元素之上。

下拉菜单

类似于Brainjar’s classic Revenge of the Menu Bar的下拉菜单使用Z-index以确保菜单的按钮和他们的下拉项位于层叠的顶部。

画廊效果的图片展示

将JQuery animation和Z-index组合可以创造出幻灯片或画廊式的卓越效果。usejquery.com 网站中的这个demo向我们展示了这两者的绝妙组合带给我们的惊喜。

Polaroid Photo Gallery by Chris Spooner 采用功能更为强大的CSS3同Z-index配合，创造出了一个当鼠标划过时会重新码放的超cool效果。

在Fancy Thumbnail Hover Effect 中Soh Tanaka 使用Query为基础的脚本改变z-index的赋值。

1. 全透视：CSS Z-index 属性 [1]
2. 全透视：CSS Z-index 属性 [2]
3. 全透视：CSS Z-index 属性 [3]
4. 全透视：CSS Z-index 属性 [4]
5. 全透视：CSS Z-index 属性 [5]
6. 全透视：CSS Z-index 属性 [6]