1 <!DOCTYPE html>
2 /*多层覆盖模态对话框*/
3 <html lang="en">
4 <head>
5 <meta charset="UTF-8">
6 <title>Title</title>
7 <style>
8 body{
9 margin: 0;
10 }
11 .c1{
12 height: 2000px;
13
14 background-color: red;
15 z-index: 2;
16 }
17 .c2{
18 position: fixed;
19 background: rgba(0,0,0,.5);
20 top: 0;
21 left: 0;
22 right: 0;
23 bottom: 0;
24 z-index: 4;
25 }
26 .c3{
27 position: fixed;
28 height: 200px;
29 width: 300px;
30 background-color: white;
31 top: 50%;
32 left: 50%;
33 margin-left: -150px;
34 margin-top: -100px;
35 z-index: 5;
36 }
37 </style>
38 </head>
39 <body>
40 <div class="c1">
41 <h1>dg</h1>
42 </div>
43 <div class="c2"></div>
44 <div class="c3">
45
46 </div>
47 </body>
48 </html>
