前面已经将 CSS 中比较核心的布局基础讲解完毕了。其中说到的主要有 3 种布局方式，一种是常规流中的定位，一种是浮动，最后的是绝对定位。不熟悉的童鞋可以翻看以前关于常规流，浮动，绝对定位的帖子。这 3 种定位方式，可以让你把元素放到任何需要的地方（- -# 当然，不包含浏览器可见窗口之外）。
为了说明方便，我们把浏览器的可视窗口看作二维的坐标系，以左上角为原点。假设两个元素分别形成了 100px×100px 的框，我把 A 的左上角放到了坐标为(100, 200)的地方，B 的左上角也放到了坐标值是 (100, 200)的地方。问题来了，我们能看到的是 A？ 还是 B ? 都能看见？
类似同Photoshop中图层的概念，我们可以把页面想像成是一张一张叠起来的透明胶片，每个透明胶片上都有一个或多个由元素形成的框，框的内容区域有图片文字等内容，改变图层的顺序和属性(透明度以及图层叠加方式)可以改变图像的最后效果。
正如前面所说，我们看到的浏览器可见窗口是 2D 的，但其内部渲染元素框的时候其实是 3D 的。除了 X轴，Y轴，还有一个 Z轴，这个Z 轴，决定了元素显示的层。用 CSS 中专业的术语说叫做：层叠级别(stack level)。
决定层叠级别的 CSS 特性是 “z-index”。
指定层叠级别：'z-index'特性
'z-index'
注意：只适用于定位框。对非定位框元素使用，浏览器会忽略。
'z-index'作用
对于一个定位框，'z-index' 特属性指定了：
1. 框在当前层叠上下文中的层叠级别。
2. 框是否生成局部层叠上下文。
'z-index'值的意义
<integer>
该整数是生成框在当前层叠上下文中的层叠级别。同时，该框也会生成一个局部层叠上下文，在其中它的层叠级别是 '0'。
auto
生成框在当前层叠上下文中的层叠级别和它的父框相同。该框不生成新的局部层叠上下文。
例如：
- HTML code
<div style="position:absolute; width:100px; z-index:3; height:100px; background-color:green;"> A <div style="position:relative;width:125px; height:25px; z-index:2; background-color:yellow;"> C </div> <div style="position:relative;width:25px; height:25px; top:-10px; background-color:blue;"> D </div></div><div style="position:absolute; width:100px; height:100px; background-color:red; top:20px; left:90px; text-align:right;"> B</div>
截图：
框是如何顺着 Z 轴排列的
在本节中，”在……前面” 指的是当用户面向可视窗口的时候离用户更近。也就是在图层中这个胶片更靠上，z 轴的值更高。
在W3C CSS2.1 规范中，每个元素都具有三维的空间位置，除我们所熟悉的水平和垂直位置外，元素还可在“Z轴”方向上层层相叠、依次向前排开。当框在视觉上产生的重叠时，跟 z 轴尤其相关。以下内容要讨论的问题就是元素的框如何沿着 Z 轴排列。
层叠上下文在排列时是不可分割的单位
渲染树向画布上画的顺序以层叠上下文的方式描述。层叠上下文可以包含更多的重叠上下文。从一个父层叠上下文的角度来看，层叠上下文本身是其中一个不可分割的最小单位；其他层叠上下文中的框，不可能出现在它里面的框的中间位置。
比如，在上面例子中，A 和 B 处于全局的层叠上下文中，A 和 B 就是那个层叠上下文中的最小单位；同时，C、D处于同一个层叠上下文中，B中的框不可能在 Z 轴上处于 C 和 D 之间。
每个元素只属于一个层叠上下文
在文档中，每个元素属于一个层叠上下文。在给定的层叠上下文中，每个元素都有一个整型的层叠级别，它描述了在相同层叠上下文中元素在“Z轴”上的显示顺序。
显示顺序
同一个层叠上下文中，层叠级别大的显示在上，层叠级别小的显示在下，相同层叠级别的框会根据文档树中的位置，按照前后倒置的方式显示。
根元素形成根层叠上下文。其他层叠上下文由任何 z-index 计算后的值不是 “auto“ 的定位元素生成。
不同层叠上下文中，元素显示顺序以父级层叠上下文的层叠级别来决定显示的先后顺序。与自身的层叠级别无关。
具体规则
每个层叠上下文都有如下的层叠级别组成（显示顺序从后到前）：
1. 形成层叠上下文的元素的背景和边框；
2. 层叠级别为负值的后代层叠上下文；
3. 常规流内非行内非定位的子元素组成的层叠级别；
4. 非定位的浮动子元素和它们的内容组成的层叠级别；
5. 常规流内行内非定位子元素组成的层叠级别；
6. 任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的层叠上下文组成的层叠级别；
7. 层叠级别为正值的后代层叠上下文。
实例
一个简单的例子：
- HTML code
<div style="position:relative; width:300px; height:300px; border:5px solid red; padding:10px; background-color:green; z-index:0;"> <div style="position:absolute; width:100px; height:100px; top:-1px; left:2px; border:5px solid blue; padding:10px; background-color:yellow; z-index:-1;"></div> <br/> <br/> <div style="width:100px; float:left; margin-left:40px; height:100px; border:5px solid gold; padding:10px; background-color:blue;"></div> <div style="width:100px; height:100px; margin-left:20px; margin-top:-20px; border:5px solid gold; padding:10px; background-color:gray;"></div> <div style="position:absolute; top:70px; left:70px; width:100px; height:100px; border:5px solid red; padding:10px; background-color:yellow; z-index:1;"></div></div>