浏览器支持
所有主流浏览器都支持 z-index 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。 IE7中"z-index：auto"允许层叠上下文。
定义和用法
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注释：元素可拥有负的 z-index 属性值。
注释：CSS2.1中Z-index 仅能在定位元素上奏效（例如 position:absolute;），CSS3中有例外。
注释：支持CSS3 animation动画
3.基础规则
3.1
平级元素：
后来居上原则
谁大谁先原则
3.2
发生嵌套：
祖先优先原则
3.3
创建层叠上下文元素的层叠顺序规则
4.理解层叠上下文和层叠水平(顺序)
1.定位元素默认z-index:auto，可以看成z-index：0
2.除了z-index值为auto外的定位元素会创建层叠上下文
3.z-index层叠顺序的比较止步于父级层叠上下文
看几个例子：
.box{positon:absolute;background:blue}
img{positon:relative;margin-left:-100px}
图片覆盖box背景色蓝色
.box{positon:absolute;background:blue}
img{positon:relative;margin-left:-100px;z-index:-1}
box背景色蓝色覆盖图片，此时图片的层叠上下文为页面根元素， .box默认为z-index：auto，不会创建层叠上下文。
.box{positon:absolute;background:blue;z-index:0}
img{positon:relative;margin-left:-100px;z-index:-1}
图片覆盖box背景色蓝色，因为容器的z-index值为数值，所以 此时图片的层叠上下文为父级容器，父级的backround层叠顺序自然在最底层。
总结：
从层叠顺序来讲，z-index:auto可以看出z-index:0
但从层叠上下文来讲，两者不同。
在元素创建层叠上下文时，应搞清楚父级元素再进行层叠顺序的对比，在父级元素下的其他子元素仍然遵循后来居上，层叠水平优先级等规则。
5.其他CSS属性的层叠上下文（默认z-index：auto）
6.z-index同其他CSS属性的层叠上下文
依赖子元素z-index的叠上下文元素（父）的层叠顺序取决于z-index值：
1.position值为relative/absolute或fixed（部分浏览器）
2.display:flex/inline-flex容器的子flex项
tip： 父容器依然为普通元素，不会创建层叠上下文，子项创建层叠上下文时仍寻找创建层叠上下文的父元素，如body元素。
