首页 专题 H5案例 前端导航 UI框架

z-index生效之道

作者:TG 日期: 2018-09-08 阅读: 226
在CSS中,z-index会影响元素的层叠关系。当然,这是有前提,最常用的就是设置元素的position值为relative/absolute/fixed。不过,这篇文章不是来介绍这些的,而是介绍一下影响z-index生效的其他CSS属性。

下面先来列出目前博主了解的CSS属性:
  1. opacity
  2. transform
  3. flexbox

1. opacity

opacity居然也能让z-index生效,真是莫名其妙。

<style>

.back,   

.front {   

  width: 100px;   

  height: 100px;   

}     


.back {   

  background: red;   

  z-index: 10;   

  opacity: 0.5;  

}     


.front {   

  background: blue;   

  margin-top: -20px;   

}

</style>


<div class="box">    

  <div class="back"></div>   

  <div class="front"></div>   

</div>

效果图对比:


结论: 当opacity不为1或0时,z-index会生效

2. transform

<style> 

.back,      

.front {       

  width: 100px;       

  height: 100px;      

}          


.back {       

  background: red;       

  z-index: 10;       

  transform: rotate(10deg);  

}          


.front {       

  background: blue;       

  margin-top: -20px;      

}  

 </style>     


<div class="box">        

  <div class="back"></div>       

  <div class="front"></div>      

</div>

效果图对比:


结论: 当transform不为none时,z-index会生效

3. flexbox

<style>

.box {   

  display: flex;   

}   

.back,   

.front {   

  width: 100px;   

  height: 100px;   

}     


.back {   

  background: red;   

  z-index: 10;   

}     


.front {   

  background: blue;   

  margin-left: -20px;   

}

</style>


<div class="box">    

  <div class="back"></div>   

  <div class="front"></div>   

</div>

效果图对比:


结论:当父元素设置display: flex | inline-flex时,子元素设置z-index生效

总结

让z-index生效:
  1. 设置元素的position值为relative/absolute/fixed
  2. 当opacity不为1或0时
  3. 当transform不为none时
  4. 当父元素设置display: flex | inline-flex时,子元素设置z-index

如有疑问,欢迎在下方评论区留言!


关注”全栈技术杂货铺“

全栈技术杂货铺