总之就是一句话：拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#father{
position: relative;
}
#box1{
color: red;
font-weight: 900;
}
.spouse{
position: absolute;
width: 300px;
height: 300px;
left: 0px;
top: 0px;
background-color: antiquewhite;
z-index: -1;
}
.kunling{
width: 200px;
height: 200px;
position: absolute;
left: 200px;
top: 200px;
z-index: 0;
}
</style>
</head>
<body>
<div id="father">
<div id="box1">
<img src="img\spouse.jpg" class="spouse">
我本该在上面
</div>
</div>
<div id="box2">
<img src="img\kunling.jpg" class="kunling" >
</div>
</body>
</html>
运行结果：
由上图可知，按照顺序大的那张图片应该显示在小的那张图片的上方，但是它由于z-index为负数，小于小的那张图片的z-index，因此就显示在了index的下方。
注：创作不易，转载请注明出处
https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人欢迎你的关注！
有问题可在CSDN上私信我，期待与你的一起学习