自然的层叠顺序
在一个 HTML 页面中，自然的层叠顺序（也就是元素在 Z 轴上的顺序）是由很多因素决定的。下面的是一个列表，它展示的列表项是处于一个层叠环境（stacking context，暂时未找到合适的汉语翻译，应该是指层叠的元素所处的那个层叠的环境）中，这些项是处于这个层叠环境的底部的。这个列表中的项都没有被赋予 Z-index 属性。
元素的背景和边框会创建一个 stacking context
引用:
·具有负值的 stacking contexts 元素，按照出现的先后顺序排列（越靠后层级越靠上）
·没有被定位，没有浮动的块级元素，按照出现的先后顺序排列
·没有被定位，浮动的元素，按照出现的先后顺序排列
·内联元素，按照出现的先后顺序排列排列
·被定位的元素，按照出现的先后顺序排列
Z-index 属性，当被正确使用的时候，会改变自然的层叠顺序。
当然，除非元素已经被定位按照互相交叠的形式展现，否则元素的层叠顺序并不会特别的明显。下面的，负边距的 BOX 被拿来展示，用以说明自然的层叠顺序。
上面的 BOX 被定义了不同的背景和边框色，并且后两个是交错的并且定义了负值的顶部边距，所以我们可以看到自然的层叠顺序。灰色的 BOX 在标记中位于第一位，蓝色的 BOX 位于第二位，金色的排在第三。应用的负边距明确的表明这个事实：这些元素未被设置 Z-index 属性；它们的层叠顺序是自然的，或者是默认的，复合规则的。产生交错的现象都是因为负值的边距。
 
为什么它会产生混乱？
即使 Z-index 并不是一个难以理解的属性，但它却会因错误的假设而使很多初级的开发人员陷入混乱。混乱发生的原因是因为 Z-index 只能工作在被明确定义了 absolute，fixed 或 relative 这三个定位属性的元素中。
为了证明 Z-index 只能工作于被定位了的元素中，这里有同样的三个 BOX，它们应用了 Z-index 属性来尝试打破他们自然的层叠顺序。
灰色的 BOX 具有“9999”的 Z-index 值，蓝色的 BOX 有“500”的 Z-index 值，金色的有“1”的 Z-index 值。合乎逻辑的，你会认为这三个 BOX 的层叠顺序会倒过来。但事实却不是这样，因为这些元素都没被设定 position 属性。
下面是同样的三个 BOX，分别都被设置了 position: relative，他们的 Z-index 值还是按照上面那段设定。
现在的结果是我们所期待的了：这些元素的层叠顺序实现了反向；灰色的 BOX 覆盖在蓝色之上，蓝色的覆盖在金色之上。
语法
#grey_box { 
    width: 200px; 
    height: 200px; 
    border: solid 1px #ccc; 
    background: #ddd; 
    position: relative; 
    z-index: 9999; 
} 
#blue_box { 
    width: 200px; 
    height: 200px; 
    border: solid 1px #4a7497; 
    background: #8daac3; 
    position: relative; 
    z-index: 500; 
} 
#gold_box { 
    width: 200px; 
    height: 200px; 
    border: solid 1px #8b6125; 
    background: #ba945d; 
    position: relative; 
    z-index: 1; 
}
 
重复一下，Z-index 属性只能工作于那些被定义了 position 属性的元素中。这并没有被足够的重视，尤其是对于那些新手。
 
运用 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 图片，创造出非常好的效果。
CSS 气泡：
Z-index 属性还可以用来实现基于 CSS 的提示气泡，就像下面trentrichardson.com展示的那样
Light Box：
如果不是因为应用了 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 的赋值。
Stu Nicholls 所做的 CSS 实验：
Stu Nicholls 在他的网站 CSSplay 中阐释了众多的 CSS 的案例。下面是一些关于 z-index 属性的作品。
CSS 图片地图
CSS 游戏
CSS 模仿框架
增强版的层叠布局：
24 ways 这个网站以 Z-index 为工具来提升它的模板体验，将年份和日期的长度、宽度延伸到和网站外层容器同等并相互交织，创造出了一个非常有趣的效果。
奇异的网摘栏：
Janko At Warp Speed 这个网站在“奇异的网摘栏”中使用了 Z-index。
完美的整页背景图：
Chris Coyier 阐述了这个技术并将之应用到了ringvemedia.com 网站上。在内容容器上应用 z-index 以确保它出现在那个看上去像“背景”其实却不是的图片上。
总结
在 CSS 中层叠关系是一个复杂的话题。本文并不打算针对这个话题的所有细节进行讨论，而是针对 Z-index 究竟是如何影响我们网页的层叠顺序进行一次深入的探讨。这里所说的，当被真正的全面理解后，我们会发现这个 CSS 属性是如此的强大。
初学者现在应该会对这个属性有了非常好的理解，并且会避免很多在对其的使用过程中经常出现的问题。另外，有基础的开发者也会对如何正确使用 Z-index 来避免很多布局方面的问题有了更为深入的理解，并且为创造出更多的 CSS 艺术作品打开了大门。