【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之十三：分层的显示(Layered presentation)
前面已经将 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
生成框在当前层叠上下文中的层叠级别和它的父框相同。该框不生成新的局部层叠上下文。
例如：
<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>
<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>
