元素绘制顺序

元素绘制顺序，顾名思义，即浏览器创建和布局元素的顺序，包括时间和空间顺序。

层叠上下文

HTML元素大多是二维的，所谓层叠上下文是指当多个元素在二维空间重叠时，如何在一个三维的空间上确定各元素的位置。形成层叠上下文的元素就会有一个三维坐标，这个第三维的坐标值受z-index的影响，但这个三维坐标的值并不一定等于z-index的值。

需要注意，HTML元素大部分是流式布局的（从上到下），元素之间并没有重叠，所以，并不是所有元素会形成层叠上下文，也就更没有z-index值。

其次，z-index是相对父层叠上下文（不是父元素）而言的，也就是说只有同一个层叠上下文中的元素相互重叠时，z-index才相互起作用。

叠层顺序，stacking queue

元素的z-index值越大，离用户就越近，反之越远。

为了更好的阐述z-index，就一下图为例。下图每一条竖线代表一个元素，同一行中的每条竖线表示视觉上叠在一起的元素，最右边代表用户的眼睛。元素重叠，用户只能看到z-index最大的那个元素，也就是离用户最近的元素。

                     |           |             |      |

                     |                  |      |      | 

                     |                  |      |      | ⇦ ☻ user

z-index:  canvas  -1    0    1      2

需要注意的是，同一个层叠上下文中，相同z-index值的子元素，后面的元素显示在前一个元素之上。也就是说，z-index只是一个相对坐标，而不是绝对的z轴坐标。

属性z-index的值默认是auto，在大多数情况下，实际等于0。布局时，负的z-index的最先，然后是z-index:auto或z-index:0，按DOM出现顺序绘制，最后是z-index值最大的元素。

根据前面所讲，不是所有元素都形成层叠，所以不是所有元素都会创建层叠上下文。下面再来了解哪些元素形成了层叠上下文。

形成层叠上下文的元素

HTML元素大部分是根据流式布局的，所以一般不会重叠。如果发生了子元素相互重叠的现象，则必定形成了层叠上下文。理论上常见的形成层叠上下文的元素有：

• 根元素；
• 相对、绝对定位元素，而且z-index不是auto。
• position：fixed元素；
• opacity小于1的元素；
• transform不是none的元素；
• filter不是none的元素；
• isolation是isolate的元素；
• will-change影响的样式属性为以上所指属性的元素；
•  -webkit-overflow-scrolling为touch的元素；

以上只是理论情况，比如在Chrome 47中，transform并没有生成层叠上下文，此时使用z-index不会起任何作用，还得使用position:relative。

如果没有指定z-index，大部分元素按DOM出现顺序（树的前序遍历）绘制。

元素自身绘制顺序

除了元素之间有顺序，元素本身的内容也有绘制顺序，一般来说，是先涂背景颜色，然后是添加背景图片。如果元素比较复杂，则还有其他顺序。以下就来了解各种类型元素自身内容的绘制顺序。

根元素

根元素就是上面的canvas，也就是整个画布。

1.        根元素的背景颜色就是整个画布的背景颜色；

2.        根元素的背景图片就是整个画布的背景图片；

块元素、list-item

1.        首先绘元素的背景颜色；

2.        然后绘元素的背景图片；

3.        最后绘元素的边框；

表元素

1.        首先绘table的背景颜色、图片；

2.        绘column group的背景颜色、图片；

3.        绘column的背景颜色、图片；

4.        绘row group的背景颜色、图片；

5.        绘row的背景颜色、图片；

6.        绘单元格的背景颜色、图片；

7.        所有的表格边框（按照DOM出现顺序）；

Outline

所有以上完成后，最后一步是绘制outline。