z-index生效之道

作者：TG 日期： 2018-09-08 字数： 4764 阅读： 4493

在CSS中，z-index会影响元素的层叠关系。当然，这是有前提，最常用的就是设置元素的position值为relative/absolute/fixed。不过，这篇文章不是来介绍这些的，而是介绍一下影响z-index生效的其他CSS属性。

下面先来列出目前博主了解的CSS属性：

opacity
transform
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生效：

设置元素的position值为relative/absolute/fixed
当opacity不为1或0时
当transform不为none时
当父元素设置display: flex | inline-flex时，子元素设置z-index

如有疑问，欢迎在下方评论区留言！

著作权归博主所有。转载请联系博主获得授权，并标注“博主名称”。

z-index生效之道

关注”全栈技术杂货铺“

目录