z-index受制于层叠上下文，看代码看图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img{
width: 300px;
}
.box{
width: 450px;
height: 450px;
position: relative;
background: lightpink;
z-index: 0;
}
.box img{
position: absolute;
z-index: 10000;
}
.box1{
width: 450px;
height: 450px;
position: relative;
margin-top: -250px;
background: lightblue;
z-index: 1;
}
.box1 img{
position: absolute;
z-index: -10;
}
</style>
</head>
<body>
<div class="box">
<img src="../img/preview.jpg" class="img1">
</div>
<div class="box1">
<img src="../img/preview.jpg" class="img2">
</div>
</body>
</html>
效果图：
为什么一个区区-10z-index可以遮盖住一个10000z-index的，这么嚣张的吗？不，看到他们的父级元素的z-index之后，顿悟了，我爸比你爸厉害，所以我只跟我爸比高矮，跟别人的娃没得比。
今天就这样吧，大家记得吃中午饭
