https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
如有转载，请注明出处（如不注明，盗者必究）
总之就是一句话：拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
<!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上私信我，期待与你的一起学习
