1.z-index的取值
1）关键字 ：auto
2）数值： 任意整数（包括正数、负数、0）
3）通用取值：inherit initial unset
2.z-index 的作用
1）一般来说，z-index的默认值是auto
The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is the same as its parent's box.
2）当z-index取数值时，有两个作用：
① 在当前元素建立一个堆叠上下文，即告诉浏览器这里出现了堆叠，需要考虑分层了。
② 告诉浏览器当前元素在这个堆叠上下文中所占的位置。
3.z-index的使用
1）只有position为relative/absolute/fixed的元素，z-index属性才起作用。注意，是该元素本身。
2）z-index遵循从父原则，即如果父元素和子元素同时设置了z-index,以父元素的z-index为准。
如图，将父元素z-index设置为-3，即使设置了子元素z-index很大，仍然显示在红色div下方。（s1是s2的父元素）。
4.堆叠上下文
堆叠上下文的理解：想象网页页面所在的空间是一个三维空间，垂直显示屏方向为Z轴，新的堆叠上下文是在z轴方向上又生出一个平面，其在z轴上的坐标位置由z-index属性指定。
文档中的元素如何确定先后层叠水平，下面的解释可以说明：
- 形成堆叠上下文环境的元素的背景与边框
- 拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）
- 正常流式布局，非 inline-block，无 position 定位（static除外）的子元素
- 无 position 定位（static除外）的 float 浮动元素
- 正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
- 拥有 z-index:0 的子堆叠上下文元素
- 拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）
可以理解为：
1）当形成新的堆叠上下文时，通过z-index确定前后，值越大越往前，z-index没有指定（即为auto）时，根据文档中的先后顺序确定前后。
2）没有形成新的堆叠上下文时：
① 不涉及position定位时（static不算），inline-block元素最前，float元素次之，其他元素再次之。
5.如何产生新的堆叠上下文
1）当元素的position为非static且z-index不是auto时；
2）当opacity的值小于1时；
3）对于一些与3d有关的属性，比如perspective：preserve-3d
transform的属性不为none
4）position：fixed
5）根元素html
