auto可定义为一个值(整数数字)，越大代表越置前，如可定义为： z-index:999。
若定义为-1，代表为最底层。
div的图层由div的style中的z-index来决定，z-index是层垂直屏幕的坐标，0最小，越大的话位置越靠上。
·测试效果：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div图层样式</title>
<style>
.div-relative{position:relativecolor:#000border:1px solid #000width:500pxheight:400px}
.div-a{ position:absoluteleft:30pxtop:30pxbackground:#F00width:200pxheight:100px}
/* css注释说明： 背景为红色 */
.div-b{ position:absoluteleft:50pxtop:60pxbackground:#FF0width:400pxheight:200px}
/* 背景为黄色 */
.div-c{ position:absoluteleft:80pxtop:80pxbackground:#00Fwidth:300pxheight:300px}
/* DIV背景颜色为蓝色 */
</style>
</head>
<body>
<div class="div-relative">
<div class="div-a">我背景为红色</div>
<div class="div-b">我背景为黄色</div>
<div class="div-c">我背景为蓝色</div>
</div>
</body>
</html>
<style>.box {display:flexmargin:100px 100px}
.box img {position:relativeheight:200pxtransition:all 0.5sz-index:1box-shadow:0 0 1px #000}
</style>
<div class="box">
<img src="图片1"/><img src="图片2"/><img src="图片3"/><img src="图片4"/><img src="图片5"/>
</div>
<script type="text/javascript">
$(function(){
$(".box img").click(function(){
$(".box img").css({"transform":"scale(1,1)","z-index":"1","box-shadow":"0 0 1px #000"})
$(this).css({"transform":"scale(1.6,1.6)","z-index":"3","box-shadow":"0 0 10px #000"})
if($(this).prev())$(this).prev().css({"transform":"scale(1.3,1.3)","z-index":"2","box-shadow":"0 0 5px #000"})
if($(this).next())$(this).next().css({"transform":"scale(1.3,1.3)","z-index":"2","box-shadow":"0 0 5px #000"})
})
})
</script>
需要引用jquery
如果点击某个div层置顶显示的话
需要用到Z-index 值
而使用zIndex值 就必须对元素进行绝对定位
可以用如下方法 让被点击的层置顶
//创建一个公共Z值var z=999
//然后获取所有div
var aDiv=document.getElementsByTagName('div')
//遍历元素
for(var i=0i<aDiv.lengthi++){
//添加事件
aDiv[i].onclick=function(){
//控制当前点击的div每次点击就z++
//比如这次点击了z值到了1000
//然后下一个div点击的时候
//把这个值赋给他 然后他还++一次 变成1001
//这样那个又是最高的了
this.style.zIndex=z++
}
}
