元素绘制顺序

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

层叠上下文

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

需要注意的是࿰