/*多层覆盖模态对话框*/

/多层覆盖模态对话框/

 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>