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一个超级无敌可爱的人欢迎你的关注！ 有问题可在上私信我，期待与你的一起学习
