【分享】说说标准——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
生成框在当前层叠上下文中的层叠级别和它的父框相同。该框不生成新的局部层叠上下文。

例如：

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>

以上代码中，A 、B、 C、D都是定位元素。其中，A 的 z-index 是 1，所以，A 会创建一个局部的层叠上下文，因此， C 、D 就处于 A 创建的局部层叠上下文中。同时，A 和 B 处于同一个层叠上下文中，A 的层叠级别是 1，B的层叠上下文同其父框的层叠上下文。D 在 A 形成的层叠上下文中，层叠级别同 A，是 ”0”。结果就是，A 遮住了 B，C 遮住了 D 和 A。
截图：


框是如何顺着 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; ma