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>