<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>z-index叠放次序</title> <style> div { width: 200px; height: 200px; background-color:pink; position: fixed; /* z-index:0; 这是默认的 ，只有定位的盒子才有 */ } .red { z-index: 3; /* 不加单位，默认为0，层级越大，层级越靠前 */ } .blue { background-color:blue; top:50px; left:50px; z-index: 4; } .green { background-color: green; top:100px; left:100px; } </style> </head> <body> <div class="red"></div> <div class="blue"></div> <div class="green"></div> </body> </html>
效果图如下：
