z-index与层叠上下文

z-index取值

z-index:auto;
z-index:<integer>;
z-index:inherit;继承

特性：

1.支持负值
2.支持css3 animation动画;
3.在css2.1时代，需要和定位元素(position:relative/absolute/fixed/sticky)配合使用；

@keyframes zIndex{
0% {z-index:-1;}
100% {z-index:51;}
}

如果定位元素z-index没有发生嵌套：

1.后来居上的准则；
2.那个大，那个上；

后者覆盖前者：（后来居上的准则）
<img src="1.jpg" style="position:absolute"/>
<img src="1.jpg" style="position:relative"/>

前者覆盖后者：（z-index:那个大，那个上）
<img src="1.jpg" style="position:absolute;z-index:2;"/>
<img src="1.jpg" style="position:relative;z-index:1;"/>

如果定位元素z-index发生嵌套：

1.祖先优先原则；(前提：z-index值是数值，非auto)

后者覆盖前者
<div style="position:relative;z-index:1;">
<img src="1.jpg" style="position:absolute;z-index:2;"/>
</div>
<div style="position:relative;z-index:1;">
<img src="1.jpg" style="position:relative;z-index:1;"/>
</div>

前者覆盖后者
<div style="position:relative;z-index:auto;">
<img src="1.jpg" style="position:absolute;z-index:2;"/>
</div>
<div style="position:relative;z-index:1;">
<img src="1.jpg" style="position:relative;z-index:1;"/>
</div>

css2.1:(z-index:auto)当前层叠上下文的生成盒子层叠水平是0，盒子（除非是根元素）不会创建一个新的层叠上下文。