css深入理解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，盒子（除非是根元素）不会创建一个新的层叠上下文。

z-index与层叠上下文

1.定位元素默认z-index:auto可以看成是z-index:0;
2.z-index不为auto的定位元素会创建层叠上下文；
3.z-index层叠顺序的比较止步于父级层叠上下文；

1.定位元素会覆盖普通元素

后者覆盖前者 （后来居上原则）
.a{}
.b{margin-left:-30px;}

前者覆盖后者
.a{position:relative;}
.b{margin-left:-30px;}

原因：前者的 定位元素的 z-index:0 z-index:auto或者z-index:0 高于 inline/inline-block水平盒子

2.z-index不为auto，与创建层叠上下文

img覆盖box，（box和img都没有z-index,都没有创建层叠上下文，都是普通元素）

.box{position: absolute;
    background: blue;
    width: 120px;
    height: 260px;}
.box img{
  position: relative;
  margin-left: 80px;
}

　box覆盖img（box的z-index是auto，没有创建层叠上下文，img会一直往上找，只到找到层叠上下文容器）

.box{position: absolute;
    background: blue;
    width: 120px;
    height: 260px;}
.box img{
  position: relative;
  margin-left: 80px;
  z-index:-1;
}

　img覆盖box （box的z-index是0，创建层叠上下文，img会找到层叠上下文容器box，并在其上显示）

.box{position: absolute;
    background: blue;
    width: 120px;
    z-index:;
    height: 260px;}
.box img{
  position: relative;
  margin-left: 80px;
  z-index:-;
}

box2覆盖img（div是普通元素所以它的z-index:1,没有任何作用）

.box2{
  background: blue;
  width: 120px;
  height: 260px;
}
.box2>div{
  z-index: ;
}
.box2>div img{
  position: relative;
  z-index: -;
}

img覆盖box2（）

.box2{
  background: blue;
  width: 120px;
  height: 260px;
  display:flex
}
.box2>div{
  z-index: ;
}
.box2>div img{
  position: relative;
  z-index: -;
}

z-index:auto 和z-index:0,前者不创建层叠上下文，后者创建层叠上下文，

但不包括ie7,ie7的z-index:auto,创建层叠上下文

从层叠顺序上讲，z-index:auto可以看成z-index:0,
但从层叠上下文来讲，两者却有着本质差异。

3.z-index受限于层叠上下文

后者覆盖前者
.box1{position:relative;z-index:0;}
.box1 img{position:absolute;z-index:9999;}

.box2{position:relative;z-index:1;}
.box2 img{position:absolute;z-index:-1;}

原因：box2的z-index大于box1的z-index

页面根元素天生具有层叠上下文，称之为‘根层叠上下文’。

z-index值为数值的定位元素(相对或绝对)也具有层叠上下文。

其他参与层叠上下文的属性们：

1.z-index值不为auto的flex项（父元素display:flex|inline-flex）
2.元素的opacity值不是1
3.元素的transform值不是none
4.元素mix-blend-mode值不是normal
5.元素的filter值不是none
6.元素的isolation值是isolate
7.position:fixed声明
8.will-change指定的属性值为上面任意一个
9.元素的-webkit-overflow-scrolling设为touch

img覆盖box3（box3创建了层叠上下文容易，，img会找到层叠上下文容器box3，并在其上显示）

.box3{
  background: blue;
  width: 120px;
  height: 260px;
 /*以下属性的任意一个，都会创建层叠上下文*/
  opacity: 0.5;
  transform:rotate(15deg);
  mix-blend-mode:darken;
  filter: blur(5px);
  isolation: isolate;
  will-change:transform;

  position: fixed;//在chrome浏览器下不需要z-index就可以创建层叠上下文，只在chrome等blink/webkit浏览器下创建层叠上下文，ie/ff，不创建层叠上下文

  position: relative/absolute;//z-index必须是数字，不是auto，才能创建层叠上下文

}
.box3 img{
  position: relative;
  z-index: -;
}

z-index与其他css属性层叠上下文：
--非定位元素层叠上下文和z-index关系大揭秘

1.不支持z-index的层叠上下文元素的层叠顺序均是z-index:auto级别
2.依赖z-index的层叠上下文元素的层叠顺序取决于z-index值

依赖z-index值创建层叠上下文的情况：
1.position值为relative/absolute或者fixed(部分浏览器)
2.display:flex|inline-flex容器的子flex项