z-index用于设置对象（div）的层叠顺序，即谁覆盖谁。z-index值，则越在下层显示。
CSS手册中的说明为：
语法：
z-index : auto | number
取值：
auto : 默认值。遵从其父对象的定位
number : 无单位的整数值。可为负数
说明：
检索或设置对象的层叠顺序。
较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的 number 值为正数的对象会在其之上，而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。
此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象。
这个属性不会作用于窗口控件，如 select 对象。
在IE5.5+中， iframe 对象开始支持此属性。而在之前的浏览器版本中， iframe 对象是窗口控件，会忽略此属性。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 zIndex 。
我们把CSS手册中例子的图片改一下：
html文件：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>position的z-index</title>
</head>
<body>
<style>
#idParentDiv{width:100%;height:120px;padding:6px;background-color:buttonshadow;position:relative;}
#idDiv1{width:160px;height:80px;background-color:#FFD700;padding:6px;position:absolute;z-index:3;left:9px;top:9px;z-index:6;}
#idDiv2{width:120px;height:80px;background-color:thistle;padding:6px;position:absolute;z-index:3;right:9px;bottom:9px;z-index:4;}
#idDiv3{width:140px;height:80px;background-color:lightskyblue;padding:6px;position:absolute;z-index:3;left:150px;top:25px;z-index:5;}
#idCodeDiv{width:100%;padding:4px;font-family:verdana,tahoma;margin:12px 0px 0px 0px;background-color:#EEEEEE;font-weight:bold;}
</style>
<div id=idParentDiv> <div id=idDiv1><img src="2.jpg" style="width:60px;border:1px solid #FFFFFF;"><br>z-index : 6 ; </div> <div id=idDiv2><img src="2.jpg" style="width:60px;border:1px solid #FFFFFF;"><br>z-index : 4 ; </div> <div id=idDiv3><img src="2.jpg" style="width:60px;border:1px solid #FFFFFF;"><br>z-index : 5 ; </div> </div> </body> </html>
效果如下：
本文地址：http://www.bianceng.cn/web/Css/201608/50336.htm
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索对象
， 属性
， position
， number
， z-index
， px
z index
position z index、css position z index、css position zindex、svg中z index的问题、css的z index，以便于您获取更多的相关知识。