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:0;
    height: 260px;}
.box img{
  position: relative;
  margin-left: 80px;
  z-index:-1;
}

 

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

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

img覆蓋box2（）

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

 

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: -1;
}

 

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項