第三十九节 层级定位 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7 
 8         .con{
 9             width: 400px;
10             height: 400px;
11             border: 1px solid #000;
12             
13         }
14 
15         .box1,.box2,.box3,.box4{
16             width: 100px;
17             height: 100px;
18             position: absolute;
19 
20         }
21 
22         .box1{
23             background-color: green;
24             left: 20px;
25             top: 20px;
26             z-index: 1  /* 设定层级，将原来最底层变到了最上层*/
27         }
28         .box2{
29             background-color: pink;
30             left: 40px;
31             top: 40px;
32         }
33         .box3{
34             background-color: black;
35             left: 60px;
36             top: 60px;
37         }
38         .box4{
39             background-color: gold;
40             left: 80px;
41             top: 80px;
42 
43         }
44     </style>
45 </head>
46 <body>
47     <div class="con">
48         <div class="box1"></div>
49         <div class="box2"></div>
50         <div class="box3"></div>
51         <div class="box4"></div>
52     </div>
53 </body>
54 </html>

 

posted @ 2020-03-05 23:26  kog_maw  阅读(108)  评论(0)    收藏  举报