html，1,2,3，层上下关系，2,3，层定位在原位置 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         body{
 8             margin: 0;
 9         }
10 
11         .model{
12             position: fixed;
13             top: 0;
14             bottom: 0;
15             left: 0;
16             right: 0;
17             background:rgba(0,0,0,.5);
18             z-index: 2;
19         }
20 
21         .content{
22             height: 281px;
23             width: 400px;
24             background-color: white;
25             position: fixed;
26             top: 50%;
27             left: 50%;
28             z-index: 3;
29             margin-left: -200px;
30             margin-top: -200px;
31         }
32         .content_1{
33             z-index: 4;
34             position: fixed;
35             top: 50%;
36             left: 50%;
37             margin-left: -200px;
38             margin-top: -200px;
39         }
40     </style>
41 </head>
42 <body>
43     <div style="height: 2000px;background-color: darkgrey">
44         <h1>你好明天</h1><h1>你好明天</h1><h1>你好明天</h1><h1>你好明天</h1><h1>你好明天</h1><h1>你好明天</h1>
45 
46     </div>
47     <div class="model"></div>
48     <div class="content"></div>
49     <div class="content_1">
50         <img src="20.gif">
51     </div>
52 
53 </body>
54 </html>

 

posted @ 2016-07-05 11:18  WrYcF  阅读(242)  评论(0)    收藏  举报
Live2D