css z-index属性用于指定元素的堆叠顺序。什么是堆叠顺序呢？即当多个元素重复的堆叠在一起的时候，谁显示在前面，谁显示在后面的顺序。

一般的，较大的z-index会覆盖掉较小值的z-index元素。

语法

z-index: number|auto|inherit|initial;
值描述
auto默认。堆叠顺序与父元素相等。
number整数数值，在兼容所有浏览器的情况下取值范围是 -2147483584 ~ 2147483584，数值越大，层级越高，数值越小，层级越低。
inherit规定应该从父元素继承 z-index 属性的值。

例子

 <!DOCTYPE html> 
<html> 
<head> 
<title>css z-index</title>
<style> 
div{
   position:fixed;
   width:400px;
   height:300px;
   z-index:20;
   background-color: orange;
}
img{
   position:relative;
   z-index:22;
}
h3{
   position:absolute;
   top:150px;
   z-index:28;
   color:blue;
}

</style> 
</head> 
  
<body>
 <div></div>
<img src="/static/default/yxjc/css/cat.jpg" width="400"/>
<h3>yxjc123.com z-index最大</h3>
</body> 
</html>

效果如下：

h3标签显示在最前面，img标签次之，div块显示在最下面。

css z-index 堆叠顺序