css堆叠上下文（堆叠上下文中的元素在z轴上的排列）

定义： 堆叠上下文，它是一块区域，这块区域由某个元素创建，它规定了该区域中的内容在z轴上排列的先后顺序

创建堆叠上下文的元素

1. HTML元素（根元素）

2. 设置了z-index(非auto值,为auto就是没有创建)数值的 定位元素

同一个堆叠上下文中的元素在z轴上的排列

1. 从后到前的排列顺序(靠近用户)：

    （1）创建堆叠上下文的元素的背景和边框 (html的背景和边框是排列在最后的)

    （2）堆叠级别(z-index, stack level)为负值的堆叠上下文  
​
    （3）常规流非定位的块盒

    （4）非定位的浮动盒子

    （5）常规流非定位行盒

    （6）任何 z-index 是 auto的定位子元素，以及 z-index 是 0 的堆叠上下文

    （7）堆叠级别为正值的堆叠上下文